accomadesc 0.2.14 → 0.2.15

package/dist/BookingRequest.svelte

@@ -9,6 +9,7 @@
   import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
   import { slide } from 'svelte/transition';
   import type { DateTime } from 'luxon';
+  import { randomID } from './names/gen.ts';
 
   const {
     endpoint,
@@ -30,6 +31,8 @@
     formatDateFunc,
   }: BookingRequestContent & I18nFacade = $props();
 
+  const id = randomID();
+
   let name = $state('');
   let email = $state('');
   let message = $state('');
@@ -127,31 +130,31 @@
 
   <form onsubmit={createRequest}>
     <input type="hidden" value={userID} />
-    <label for="name-input">
+    <label for={`${id}-name-input`}>
       <span class:disabled>{@html translateFunc ? translateFunc(nameLabel) : 'Name'}:</span>
     </label>
     <div class="input-wrapper">
       <TextInput
-        id="name-input"
+        id={`${id}name-input`}
         type="text"
         marginForMessage={false}
         bind:value={name}
         enabled={!disabled}
       />
     </div>
-    <label for="email-input">
+    <label for={`${id}-email-input`}>
       <span class:disabled>{@html translateFunc ? translateFunc(emailLabel) : 'Email'}:</span>
     </label>
     <div class="input-wrapper">
       <TextInput
-        id="email-input"
+        id={`${id}-email-input`}
         type="email"
         marginForMessage={false}
         bind:value={email}
         enabled={!disabled}
       />
     </div>
-    <label for="date-input">
+    <label for={`${id}-date-input`}>
       <span class:disabled
         >{@html translateFunc ? translateFunc(dateEntryLabel) : 'Vacation Dates'}:</span
       >
@@ -165,7 +168,7 @@
       <div class="date-input-wrapper" id="engage-date-buttons">
         <Button
           enabled={!disabled}
-          id="date-input"
+          id={`${id}-date-input`}
           iconName="edit"
           size={1.8}
           clicked={engageDateInput}
@@ -229,7 +232,6 @@
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
-    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -246,6 +248,7 @@
     row-gap: 0.5rem;
 
     label {
+      align-content: center;
       grid-column-start: start;
       grid-column-end: gap-start;
     }

package/dist/ContactForm.svelte

@@ -4,6 +4,7 @@
   import TextInput from './basic/TextInput.svelte';
   import Notes from './basic/Notes.svelte';
   import type { ContactFormContent, I18nFacade } from './types.js';
+  import { randomID } from './names/gen.ts';
 
   const {
     userID,
@@ -20,6 +21,8 @@
     translateFunc,
   }: ContactFormContent & I18nFacade = $props();
 
+  const id = randomID();
+
   let name = $state('');
   let email = $state('');
   let question = $state('');
@@ -83,17 +86,36 @@
   {#if explainer}
     <div class="explainer">{@html translateFunc ? translateFunc(explainer) : ''}</div>
   {/if}
+
   <form onsubmit={submitMessage}>
     <input type="hidden" value={userID} />
-    <label class:disabled>
-      {@html translateFunc ? translateFunc(nameLabel) : 'Name'}:
-      <TextInput type="text" marginForMessage={false} bind:value={name} enabled={!disabled} />
+    <label for={`${id}-name`}>
+      <span class:disabled>{@html translateFunc ? translateFunc(nameLabel) : 'Name'}:</span>
     </label>
-    <label class:disabled>
-      {@html translateFunc ? translateFunc(emailLabel) : 'Email'}:
-      <TextInput type="email" marginForMessage={false} bind:value={email} enabled={!disabled} />
+    <div class="input-wrapper">
+      <TextInput
+        id={`${id}-name`}
+        type="text"
+        marginForMessage={false}
+        bind:value={name}
+        enabled={!disabled}
+      />
+    </div>
+    <label for={`${id}-email`}>
+      <span class:disabled>{@html translateFunc ? translateFunc(emailLabel) : 'Email'}:</span>
     </label>
-    <label class="row-label"
+
+    <div class="input-wrapper">
+      <TextInput
+        id={`${id}-email`}
+        type="email"
+        marginForMessage={false}
+        bind:value={email}
+        enabled={!disabled}
+      />
+    </div>
+
+    <label class="notes-input"
       ><div class:disabled>
         {@html translateFunc
           ? translateFunc(questionLabel)
@@ -101,9 +123,9 @@
             >&nbsp;({currentCharsCount}/{maxCharsAllowed})</span
           >{/if}:
       </div>
-
-      <Notes {disabled} changed={questionChanged} />
+      <Notes id={`${id}-notes`} {disabled} changed={questionChanged} />
     </label>
+
     <div class="message-wrapper">
       {#if preview}<div>[PREVIEW]</div>{/if}
       {#if successfullySent || preview}
@@ -133,13 +155,13 @@
 <style>
   .explainer {
     margin-bottom: 1rem;
+    grid-column: span 2;
   }
 
   .wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
-    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -151,28 +173,43 @@
     }
   }
 
-  .message-wrapper {
-    display: flex;
-    justify-content: space-between;
-  }
-
   form {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 0.5rem;
-  }
+    display: grid;
+    grid-template-columns: [start] 1fr [gap-start] 0.5fr [gap-end] 3fr [end];
+    row-gap: 0.5rem;
+
+    label {
+      align-content: center;
+      grid-column-start: start;
+      grid-column-end: gap-start;
+    }
 
-  label {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    justify-content: space-between;
-  }
+    .message-wrapper {
+      margin-top: 1rem;
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      justify-content: space-between;
+    }
+    .button-wrapper {
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      justify-content: flex-start;
+    }
+    .input-wrapper {
+      grid-column-start: gap-end;
+      grid-column-end: end;
+    }
 
-  .row-label {
-    flex-direction: column;
-    gap: 0.2rem;
+    .notes-input {
+      margin-top: 2rem;
+      grid-column-start: start;
+      grid-column-end: end;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
   }
 
   .max-chars-message {

package/dist/PricingShort.svelte

@@ -5,7 +5,7 @@
   import type { I18nFacade, PricingShortContent, PricingEntry } from './types.js';
 
   let {
-    global = undefined,
+    global,
     entries = [],
     ranges = [],
     staticRanges = [],

package/dist/types.d.ts

@@ -283,7 +283,6 @@ export interface BookingRequestContent {
     sentErroredText: string;
     invalidText: string;
     messageLabel: string;
-    numberOfNightsLabel: string;
     maxCharsAllowed?: number;
     explainer?: string;
     preview?: boolean;

package/package.json

@@ -1,10 +1,12 @@
 {
 	"name": "accomadesc",
-	"version": "0.2.14",
+	"version": "0.2.15",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -49,8 +51,7 @@
 		"svelte": "^5.20.5",
 		"svelte-check": "^4.1.4",
 		"typescript": "^5.8.2",
-		"vite": "^6.2.0",
-		"vitest": "^2.1.9"
+		"vite": "^6.2.0"
 	},
 	"dependencies": {
 		"@dinero.js/currencies": "2.0.0-alpha.14",
@@ -62,7 +63,6 @@
 		"luxon": "^3.5.0",
 		"squirrelly": "^9.1.0"
 	},
-	"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b",
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"esbuild"