@dosgato/dialog 1.1.2 → 1.1.4

package/dist/Dialog.svelte

@@ -1,7 +1,7 @@
 <script context="module">export const DIALOG_TABS_CONTEXT = {};
 </script>
-<script>import arrowLeftLight from '@iconify-icons/ph/arrow-left-light';
-import arrowRightLight from '@iconify-icons/ph/arrow-right-light';
+<script>import arrowLeft from '@iconify-icons/ph/arrow-left-bold';
+import arrowRight from '@iconify-icons/ph/arrow-right-bold';
 import xLight from '@iconify-icons/ph/x-light';
 import arrowsOutSimple from '@iconify-icons/ph/arrows-out-simple';
 import arrowsInSimple from '@iconify-icons/ph/arrows-in-simple';
@@ -59,7 +59,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     <footer class="actions">
       <slot name="buttons" {nextTitle} {prevTitle} hasRequired={hasRequired && !ignoreTabs} onPrev={onPrev} onNext={onNext} {describedby}>
         {#if prevTitle && !ignoreTabs}
-          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeftLight} inline /> Previous<ScreenReaderOnly> Tab ({prevTitle})</ScreenReaderOnly></Button>
+          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeft} inline /> <span class="prev-next" aria-hidden="true">Previous</span><ScreenReaderOnly>Previous Tab ({prevTitle})</ScreenReaderOnly></Button>
         {/if}
         {#if isNotBlank(cancelText)}
           <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
@@ -68,7 +68,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
           <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline /> {continueText}</Button>
         {/if}
         {#if nextTitle && !ignoreTabs}
-          <Button class="next" disabled={!nextTitle} on:click={onNext}>Next<ScreenReaderOnly> Tab ({nextTitle})</ScreenReaderOnly> <Icon width="1.2em" icon={arrowRightLight} inline /></Button>
+          <Button class="next" disabled={!nextTitle} on:click={onNext}><span class="prev-next" aria-hidden="true">Next</span><ScreenReaderOnly> Next Tab ({nextTitle})</ScreenReaderOnly> <Icon icon={arrowRight} inline /></Button>
         {/if}
       </slot>
     </footer>
@@ -167,9 +167,21 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     border-bottom: 0px !important;
   }
 
+  footer.actions {
+    container-type: inline-size;
+    container-name: dosgato-dialog-actions
+  }
+
   footer.actions :global(.prev) {
     margin-right: auto;
   }
+
+  @container dosgato-dialog-actions (max-width: 450px) {
+    footer.actions :global(button span.prev-next) {
+      display: none;
+    }
+  }
+
   .header-buttons {
     position: absolute;
     top: 0.1em;

package/dist/FieldChooserLink.svelte

@@ -245,6 +245,7 @@ $: void updateSelected($value);
   }
   :global([data-eq~="400px"]) .dialog-chooser-entry {
     flex-direction: column;
+    align-items: center;
   }
   .dialog-chooser-entry > button {
     border-radius: 0.25em;
@@ -260,6 +261,7 @@ $: void updateSelected($value);
   }
   :global([data-eq~="400px"]) .dialog-chooser-entry-input {
     margin-bottom: 0.2em;
+    width: 100%;
   }
   .dialog-chooser-entry-input input {
     width: 100%;

package/dist/FieldMultiple.svelte

@@ -77,7 +77,9 @@ $: messages = compact ? $messageStore : [];
       </div>{/if}
     </div>
     <svelte:fragment slot="addbutton" let:maxed let:onClick>
-      <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
+      {#if !maxed || (maxed && maxLength > 1)}
+        <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
+      {/if}
     </svelte:fragment>
   </AddMore>
 </Container>

package/dist/Tabs.svelte

@@ -10,7 +10,7 @@ export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
 export let disableDialogControl = false;
-export let accordionOnMobile = true;
+export let accordionOnMobile = false;
 /**
  * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
  * displayed at that width.

package/dist/chooser/Chooser.svelte

@@ -87,7 +87,7 @@ let thumbnailExpanded = false;
 </script>
 
 <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
-  <section class="dialog-chooser-window">
+  <section class="dialog-chooser-window" class:no-controls={$sources.length < 2}>
     {#if $sources.length > 1}
     <header class="dialog-chooser-controls">
       <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} accordionOnMobile={false}/>
@@ -126,6 +126,9 @@ let thumbnailExpanded = false;
     container-type: inline-size;
     container-name: dosgato-dialog-chooser-window
   }
+  .dialog-chooser-window.no-controls {
+    height: 85vh;
+  }
   .dialog-chooser-window * {
     box-sizing: border-box;
   }

package/dist/chooser/ChooserPreview.svelte

@@ -97,17 +97,17 @@ $: reactToPreview($preview);
       flex-direction: row;
       height: 25vh;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail) {
       max-width: 50%;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail.expanded) {
       max-width: unset;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail img) {
       object-fit: cover;
       object-position: center;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail.expanded img) {
       object-fit: scale-down;
       width: unset;
     }

package/dist/tree/Tree.svelte

@@ -207,24 +207,24 @@ async function selectHeader(selected) {
 </script>
 
 <svelte:window on:mouseup={headerDragEnd} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="tree-header" class:resizing={!!dragtargetid} use:resize={{ store: treeWidth }} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined}>
-<div class="checkbox" bind:this={checkboxelement} aria-hidden="true">&nbsp;</div>
-{#each shownHeaders as header, i (header.label)}
-  <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" aria-hidden="true" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  {#if enableResize && i !== shownHeaders.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
-{/each}
-{#if hiddenHeaders.length}
-  <div class="button-wrapper">
-    <button bind:this={showMoreButton} type='button'><Icon icon={dotsIcon} hiddenLabel="View other columns"/></button>
-    <PopupMenu bind:value={selectedHeaderValue} items={hiddenHeaders.map(h => ({ value: h.id, label: h.label }))} buttonelement={showMoreButton} on:change={e => {selectHeader(e.detail)}} let:item menuContainerClass="hideable-container" menuClass="hideable-headers" menuItemSelectedClass="selected-header">
-      {#if item.hasOwnProperty('value')}
-        <Icon icon={'value' in item && item.value === selectedHeaderValue ? radioSelectedIcon : circleIcon} inline/>
-        {item.label}
-      {/if}
-    </PopupMenu>
-  </div>
-{/if}
+  <div class="checkbox" bind:this={checkboxelement} aria-hidden="true">&nbsp;</div>
+  {#each shownHeaders as header, i (header.label)}
+    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" aria-hidden="true" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
+    {#if enableResize && i !== shownHeaders.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
+  {/each}
+  {#if hiddenHeaders.length}
+    <div class="button-wrapper">
+      <button bind:this={showMoreButton} type='button'><Icon icon={dotsIcon} hiddenLabel="View other columns"/></button>
+      <PopupMenu bind:value={selectedHeaderValue} items={hiddenHeaders.map(h => ({ value: h.id, label: h.label }))} buttonelement={showMoreButton} on:change={async e => { await selectHeader(e.detail) }} let:item menuContainerClass="hideable-container" menuClass="hideable-headers" menuItemSelectedClass="selected-header">
+        {#if 'value' in item}
+          <Icon icon={'value' in item && item.value === selectedHeaderValue ? radioSelectedIcon : circleIcon} inline width="1.1em"/>
+          {item.label}
+        {/if}
+      </PopupMenu>
+    </div>
+  {/if}
 </div>
 {#if mounted && myRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
@@ -263,7 +263,7 @@ async function selectHeader(selected) {
     cursor: col-resize;
   }
   .tree-header > .tree-header-cell {
-    padding: 0.4em 0.3em;
+    padding: 0.4em 0.5em;
   }
   .tree-header > .tree-separator {
     position: relative;
@@ -312,7 +312,7 @@ async function selectHeader(selected) {
     padding: 0.4em;
     background: white;
     border: 1px solid slategray;
-    border-radius: 3px;
+    border-radius: 5px;
     min-width: 10em;
     max-height: 20em;
     overflow-y: auto;
@@ -320,6 +320,8 @@ async function selectHeader(selected) {
   :global(div.hideable-container ul.hideable-headers li[role="option"]) {
     padding-left: 0;
     color: black;
+    padding: 0.5em;
+    font-size: 1.1em;
   }
 
 </style>

package/dist/tree/TreeNode.svelte

@@ -364,12 +364,13 @@ $: if ($dragging) {
   :global(.resizing) .tree-node {
     cursor: col-resize;
   }
+  .tree-node > div {
+    padding: 0.6em 0.5em;
+  }
   .tree-node .checkbox {
     min-width: 1.5em;
     max-width: 1.5em;
-  }
-  .tree-node > div {
-    padding: 0.6em 0.3em;
+    padding-left: 0.3em;
   }
   .tree-node > div.left {
     display: flex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -27,7 +27,7 @@
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.5.5",
-    "@txstate-mws/svelte-forms": "^1.3.16",
+    "@txstate-mws/svelte-forms": "^1.3.17",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },