@dosgato/dialog 1.1.1 → 1.1.2

package/dist/FieldChooserLink.svelte

@@ -243,15 +243,24 @@ $: void updateSelected($value);
     align-items: flex-start;
     margin-top: 0.2em;
   }
+  :global([data-eq~="400px"]) .dialog-chooser-entry {
+    flex-direction: column;
+  }
   .dialog-chooser-entry > button {
     border-radius: 0.25em;
-    border: 1px solid #808080;
-    color: black;
+    border: 0;
+    background-color: var(--dg-button-bg, #501214);
+    color: var(--dg-button-text, #fff);
+    padding: 0.5em 1em;
+    font-size: 0.8em;
   }
   .dialog-chooser-entry-input {
     position: relative;
     flex-grow: 1;
   }
+  :global([data-eq~="400px"]) .dialog-chooser-entry-input {
+    margin-bottom: 0.2em;
+  }
   .dialog-chooser-entry-input input {
     width: 100%;
     padding-right: 1.4em;

package/dist/Tabs.svelte

@@ -11,6 +11,11 @@ export let active = undefined;
 export let store = new TabStore(tabs, active);
 export let disableDialogControl = false;
 export let accordionOnMobile = true;
+/**
+ * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
+ * displayed at that width.
+ */
+export let columnsShown = undefined;
 $: store.update(v => ({ ...v, tabs, accordionOnMobile }));
 const activeStore = new Store({});
 const tabelements = [];
@@ -30,7 +35,7 @@ if (!disableDialogControl)
 const currentName = store.currentName();
 const currentIdx = store.currentIdx();
 const accordion = store.accordion();
-$: cols = Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
+$: cols = (typeof columnsShown === 'function') ? columnsShown($store.clientWidth ?? 1024) : Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
 $: wrapping = cols !== $store.tabs.length;
 $: dialogContext.hasTabs = !$accordion;

package/dist/Tabs.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         store?: TabStore | undefined;
         disableDialogControl?: boolean | undefined;
         accordionOnMobile?: boolean | undefined;
+        /**
+           * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
+           * displayed at that width.
+           */ columnsShown?: ((tabsWidth: number) => number) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Chooser.svelte

@@ -151,7 +151,7 @@ let thumbnailExpanded = false;
     .dialog-chooser-chooser {
       order: 3;
       width: 100%;
-      height: 50%;
+      height: 70%;
     }
   }
 

package/dist/iconpicker/FieldIconPicker.svelte

@@ -156,8 +156,11 @@ function onKeyDown(e) {
 <style>
   .select-icon {
     border-radius: 0.25em;
-    border: 1px solid #808080;
-    color: black;
+    border: 0px;
+    background-color: var(--dg-button-bg, #501214);
+    color: var(--dg-button-text, #fff);
+    padding: 0.5em 1em;
+    font-size: 0.8em;
   }
   section {
     position: relative;

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.1",
+  "version": "1.1.2",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",