accomadesc 0.2.20 → 0.2.21

package/dist/AccoCard.svelte

@@ -63,31 +63,31 @@
 </div>
 
 <style>
-  .title-with-slug {
+  div.title-with-slug {
     grid-area: first-row-line / middle-line / second-row-line / end-line;
   }
 
-  .photo {
+  div.photo {
     grid-area: first-row-line / start-line / fifth-row-line / middle-line;
     position: relative;
   }
 
-  .amenities-container {
+  div.amenities-container {
     grid-area: second-row-line / middle-line / third-row-line / end-line;
     position: relative;
   }
 
-  .pricing-container {
+  div.pricing-container {
     grid-area: third-row-line / middle-line / fourth-row-line / end-line;
     position: relative;
   }
 
-  .calendar-container {
+  div.calendar-container {
     grid-area: fourth-row-line / middle-line / fifth-row-line / end-line;
     position: relative;
   }
 
-  .accocard-wrapper {
+  div.accocard-wrapper {
     width: calc(100% - 8rem);
     position: relative;
     display: grid;
@@ -111,85 +111,85 @@
     }
   }
 
-  .accocard-wrapper h2 {
+  div.accocard-wrapper h2 {
     margin-top: 0;
     margin-bottom: 0;
     text-align: right;
   }
 
-  .slug {
+  div.slug {
     text-align: right;
     margin-bottom: 1rem;
   }
 
   @media (max-width: 999px) {
-    .accocard-wrapper {
+    div.accocard-wrapper {
       grid-template-rows: [first-row-line] auto [second-row-line] auto [third-row-line] auto [fourth-row-line];
     }
 
-    .title-with-slug {
+    div.title-with-slug {
       grid-area: first-row-line / middle-line / second-row-line / end-line;
     }
 
-    .photo {
+    div.photo {
       grid-area: first-row-line / start-line / third-row-line / middle-line;
     }
 
-    .amenities-container {
+    div.amenities-container {
       grid-area: second-row-line / middle-line / third-row-line / end-line;
     }
 
-    .pricing-container {
+    div.pricing-container {
       grid-area: third-row-line / start-line / fourth-row-line / middle-line;
     }
 
-    .calendar-container {
+    div.calendar-container {
       grid-area: third-row-line / middle-line / fourth-row-line / end-line;
     }
   }
 
   @media (max-width: 750px) {
-    .accocard-wrapper {
+    div.accocard-wrapper {
       grid-template-rows: repeat(auto);
       grid-template-columns: 1fr;
     }
 
-    .title-with-slug {
+    div.title-with-slug {
       grid-row: auto;
       grid-column: 1;
     }
 
-    .photo {
+    div.photo {
       grid-row: auto;
       grid-column: 1;
     }
 
-    .amenities-container {
+    div.amenities-container {
       grid-row: auto;
       grid-column: 1;
     }
 
-    .pricing-container {
+    div.pricing-container {
       grid-row: auto;
       grid-column: 1;
     }
 
-    .calendar-container {
+    div.calendar-container {
       grid-row: auto;
       grid-column: 1;
     }
 
-    .accocard-wrapper h2 {
+    div.accocard-wrapper h2 {
       text-align: center;
     }
 
-    .slug {
+    div.slug {
       text-align: center;
     }
   }
 
   @media (max-width: 750px) {
-    .accocard-wrapper {
+    div.accocard-wrapper {
       width: calc(100% - 2rem);
 
       gap: 0.5rem;

package/dist/AccoDescription.svelte

@@ -45,12 +45,12 @@
 </div>
 
 <style>
-  .container {
+  div.container {
     position: relative;
     height: 100%;
     width: 100%;
 
-    .content {
+    div.content {
       width: 100%;
       height: 100%;
 
@@ -68,7 +68,7 @@
       }
     }
 
-    .content.extended {
+    div.content.extended {
       :global(h1) {
         font-size: var(--font-size-header-1);
         text-align: left;

package/dist/AmenitiesCore.svelte

@@ -151,7 +151,7 @@
 </div>
 
 <style>
-  .amenities-wrapper {
+  div.amenities-wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
@@ -166,25 +166,25 @@
     }
   }
 
-  .element-wrapper {
+  div.element-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  .bool-element-wrapper {
+  div.bool-element-wrapper {
     position: relative;
     width: 2.2rem;
     height: 2.2rem;
   }
 
-  .main-icon-container {
+  div.main-icon-container {
     position: absolute;
     top: 0.3rem;
     left: 0.3rem;
   }
 
-  .not-icon-container {
+  div.not-icon-container {
     position: absolute;
     top: 0;
     left: 0;

package/dist/BookingRequest.svelte

@@ -224,11 +224,11 @@
 </div>
 
 <style>
-  .explainer {
+  div.explainer {
     margin-bottom: 1rem;
   }
 
-  .wrapper {
+  div.wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
@@ -262,29 +262,29 @@
       gap: 1rem;
     }
 
-    .input-wrapper {
+    div.input-wrapper {
       grid-column-start: gap-end;
       grid-column-end: end;
     }
-    .date-input-wrapper {
+    div.date-input-wrapper {
       display: flex;
       gap: 1rem;
       justify-content: flex-start;
     }
-    .picker-wrapper {
+    div.picker-wrapper {
       position: absolute;
       z-index: 9999;
       background-color: var(--main-bg-color);
     }
 
-    .message-wrapper {
+    div.message-wrapper {
       margin-top: 1rem;
       grid-column-start: start;
       grid-column-end: end;
       display: flex;
       justify-content: space-between;
     }
-    .button-wrapper {
+    div.button-wrapper {
       grid-column-start: start;
       grid-column-end: end;
       display: flex;
@@ -292,27 +292,28 @@
     }
   }
 
-  .max-chars-message {
+  span.max-chars-message {
     font-weight: bolder;
     color: var(--alert-font-color);
   }
 
-  .message {
+  div.message {
     display: flex;
     justify-content: space-between;
   }
 
-  .success {
+  div.success {
     color: var(--accept-font-color);
     font-weight: bolder;
   }
 
-  .error {
+  div.error {
     color: var(--alert-font-color);
     font-weight: bolder;
   }
 
-  .disabled {
+  div.disabled,
+  span.disabled {
     color: var(--disabled-font-color);
   }
 </style>

package/dist/Calendar.svelte

@@ -44,7 +44,7 @@
 </div>
 
 <style>
-  .cal-wrapper {
+  div.cal-wrapper {
     position: relative;
     display: flex;
     justify-content: center;

package/dist/CalendarAvailable.svelte

@@ -52,7 +52,7 @@
 </div>
 
 <style>
-  .cal-wrapper {
+  div.cal-wrapper {
     color: var(--main-font-color);
     background-color: var(--main-bg-color);
     position: relative;

package/dist/CalendarGrid.svelte

@@ -34,7 +34,7 @@
 </div>
 
 <style>
-  .cal-wrapper {
+  div.cal-wrapper {
     position: relative;
     display: flex;
     justify-content: center;

package/dist/CalendarRows.svelte

@@ -33,7 +33,7 @@
 </div>
 
 <style>
-  .cal-wrapper {
+  div.cal-wrapper {
     position: relative;
     display: flex;
     justify-content: center;

package/dist/ContactForm.svelte

@@ -153,12 +153,12 @@
 </div>
 
 <style>
-  .explainer {
+  div.explainer {
     margin-bottom: 1rem;
     grid-column: span 2;
   }
 
-  .wrapper {
+  div.wrapper {
     background-color: var(--main-bg-color);
     color: var(--main-font-color);
 
@@ -184,25 +184,25 @@
       grid-column-end: gap-start;
     }
 
-    .message-wrapper {
+    div.message-wrapper {
       margin-top: 1rem;
       grid-column-start: start;
       grid-column-end: end;
       display: flex;
       justify-content: space-between;
     }
-    .button-wrapper {
+    div.button-wrapper {
       grid-column-start: start;
       grid-column-end: end;
       display: flex;
       justify-content: flex-start;
     }
-    .input-wrapper {
+    div.input-wrapper {
       grid-column-start: gap-end;
       grid-column-end: end;
     }
 
-    .notes-input {
+    label.notes-input {
       margin-top: 2rem;
       grid-column-start: start;
       grid-column-end: end;
@@ -212,22 +212,23 @@
     }
   }
 
-  .max-chars-message {
+  span.max-chars-message {
     font-weight: bolder;
     color: var(--alert-font-color);
   }
 
-  .success {
+  div.success {
     color: var(--accept-font-color);
     font-weight: bolder;
   }
 
-  .error {
+  div.error {
     color: var(--alert-font-color);
     font-weight: bolder;
   }
 
-  .disabled {
+  div.disabled,
+  span.disabled {
     color: var(--disabled-font-color);
   }
 </style>

package/dist/LeafletMap.svelte

@@ -57,12 +57,12 @@
 </div>
 
 <style>
-  .wrapper {
+  div.wrapper {
     width: 100%;
     position: relative;
     background-color: var(--main-bg-color);
   }
-  .nav-floater {
+  div.nav-floater {
     position: absolute;
     top: 0;
     right: 0;
@@ -74,7 +74,7 @@
   a {
     color: var(--picture-link-font-color);
   }
-  .map {
+  div.map {
     width: 100%;
     min-height: 60vh;
   }

package/dist/MainNav.svelte

@@ -77,7 +77,7 @@
     margin-left: 1rem;
   }
 
-  nav {
+  nav.main-nav {
     z-index: 998;
     position: fixed;
     padding-right: 1rem;
@@ -100,7 +100,7 @@
     }
   }
 
-  .not-nav {
+  button.not-nav {
     border: none;
     position: fixed;
     top: 0;
@@ -117,7 +117,7 @@
     margin-bottom: 1rem;
   }
 
-  .radio-wrapper {
+  div.radio-wrapper {
     font-family: var(--nav-font-family);
     font-variant: var(--nav-font-variant);
     font-size: 1.6rem;

package/dist/NavItem.svelte

@@ -37,7 +37,7 @@
 </div>
 
 <style>
-  .sub {
+  div.sub {
     font-size: 1.2rem;
     margin-left: 0.4rem;
   }
@@ -51,16 +51,16 @@
     color: var(--nav-font-color);
   }
 
-  .link-icon-wrapper {
+  div.link-icon-wrapper {
     position: absolute;
     left: -1.8rem;
     top: 0rem;
   }
-  .sub .link-icon-wrapper {
+  div.sub div.link-icon-wrapper {
     left: -2.2rem;
   }
 
-  .ext-link-wrapper {
+  div.ext-link-wrapper {
     display: flex;
     position: relative;
     width: 100%;

package/dist/PageComponent.svelte

@@ -195,7 +195,7 @@
 </div>
 
 <style>
-  .section-wrapper {
+  div.section-wrapper {
     margin-bottom: 2rem;
     width: 100%;
     overflow-y: clip;
@@ -235,7 +235,7 @@
     margin-top: calc(100vh - 1rem);
   }
 
-  .floating-title {
+  div.floating-title {
     width: 100%;
     height: calc(100vh - 2rem);
     position: absolute;
@@ -250,7 +250,7 @@
     text-align: center;
   }
 
-  .floating-title h1 {
+  div.floating-title h1 {
     font-weight: bolder;
     font-size: 2.8rem;
     font-family: var(--landing-title-font-family, 'sans-serif');
@@ -260,12 +260,12 @@
   }
 
   @media (max-width: 300px) {
-    .floating-title h1 {
+    div.floating-title h1 {
       font-size: 1.6rem;
     }
   }
 
-  .ham-wrapper {
+  div.ham-wrapper {
     position: absolute;
     right: 1rem;
     top: 1rem;
@@ -274,11 +274,11 @@
     z-index: 999;
   }
 
-  .fixed {
+  div.fixed {
     position: fixed;
   }
 
-  .nav {
+  div.nav {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
@@ -289,12 +289,12 @@
     padding-top: 0.5rem;
   }
 
-  .nav :global(*) {
+  div.nav :global(*) {
     background-color: var(--header-bg-color);
     color: var(--footer-font-color);
   }
 
-  .page-wrapper {
+  div.page-wrapper {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -303,11 +303,11 @@
     background-color: var(--main-bg-color);
   }
 
-  .disabled {
+  div.disabled {
     filter: grayscale();
   }
 
-  .hero-nav-wrapper {
+  div.hero-nav-wrapper {
     position: absolute;
     right: 0;
     left: 0;

package/dist/PageFooter.svelte

@@ -21,26 +21,26 @@
 </footer>
 
 <style>
-  .nav {
+  div.nav {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     flex-grow: 3;
   }
-  .content {
+  div.content {
     flex-grow: 1;
     display: flex;
     flex-direction: row;
     justify-content: right;
   }
 
-  .content :global(*) {
+  div.content :global(*) {
     background-color: var(--footer-bg-color);
     color: var(--footer-font-color);
   }
 
-  .link-wrapper {
+  div.link-wrapper {
     text-decoration: underline;
     font-family: var(--nav-font-family, 'mono');
     font-variant: var(--nav-font-variant, 'normal');
@@ -75,7 +75,7 @@
   }
 
   @media (max-width: 500px) {
-    .nav {
+    div.nav {
       flex-direction: row;
       justify-content: left;
     }

package/dist/PageHeader.svelte

@@ -36,7 +36,7 @@
     }
   }
 
-  .text-wrapper {
+  div.text-wrapper {
     min-height: 10rem;
     display: flex;
     flex-direction: column;
@@ -46,21 +46,21 @@
     margin-right: 8rem;
   }
 
-  .slug {
+  div.slug {
     font-size: 1.6rem;
     font-family: var(--header-font-family, 'sans-serif');
     font-variant: var(--header-font-variant, 'small-caps');
     margin-bottom: 1rem;
   }
 
-  .header h1 {
+  div.header h1 {
     margin-top: 0.6rem;
     margin-bottom: 0.3rem;
     font-family: var(--page-title-font-family, 'sans-serif');
     font-variant: var(--page-title-font-variant, 'small-caps');
   }
 
-  .logo {
+  object.logo {
     position: absolute;
     left: 0;
     top: 0;
@@ -71,40 +71,40 @@
   }
 
   @media (max-width: 550px) {
-    .text-wrapper {
+    div.text-wrapper {
       margin-left: 10rem;
       margin-right: 2rem;
     }
   }
 
   @media (max-width: 500px) {
-    .text-wrapper {
+    div.text-wrapper {
       min-height: 6rem;
       margin-left: 6rem;
     }
 
-    .slug {
+    div.slug {
       display: none;
     }
-    .logo {
+    object.logo {
       width: 5rem;
     }
-    .header h1 {
+    div.header h1 {
       font-size: 2.2rem;
     }
   }
 
   @media (max-width: 300px) {
-    .text-wrapper {
+    div.text-wrapper {
       min-height: 4rem;
       margin-left: 0.5rem;
       margin-right: 1rem;
     }
 
-    .logo {
+    object.logo {
       display: none;
     }
-    .header h1 {
+    div.header h1 {
       padding-left: 1rem;
     }
   }

package/dist/Photo.svelte

@@ -82,7 +82,7 @@
     position: relative;
   }
 
-  .link-icon-wrapper {
+  div.link-icon-wrapper {
     position: absolute;
     top: -0.4rem;
     right: -0.4rem;
@@ -91,7 +91,7 @@
     border-radius: 1rem;
   }
 
-  .attribution-wrapper {
+  div.attribution-wrapper {
     color: var(--attribution-font-color);
     background-color: var(--attribution-bg-color);
     font-size: 0.7rem;
@@ -101,7 +101,7 @@
     border-radius: 1rem;
   }
 
-  .attribution-container {
+  div.attribution-container {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
@@ -114,12 +114,12 @@
     width: 100%;
   }
 
-  .no-frame {
+  div.no-frame {
     width: 100%;
     height: 100%;
   }
 
-  .frame {
+  div.frame {
     width: 100%;
     height: 100%;
     padding: 0.3rem;

package/dist/PhotoGallery.svelte

@@ -115,7 +115,7 @@
 </div>
 
 <style>
-  .next-wrapper {
+  div.next-wrapper {
     position: absolute;
     right: 1rem;
     top: calc(50% - 1.65rem);
@@ -124,7 +124,7 @@
     --button-bg-color: var(--gallery-button-bg-color);
   }
 
-  .prev-wrapper {
+  div.prev-wrapper {
     position: absolute;
     left: 1rem;
     top: calc(50% - 1.65rem);
@@ -133,12 +133,12 @@
     --button-bg-color: var(--gallery-button-bg-color);
   }
 
-  .complete-row {
+  div.complete-row {
     grid-column-start: firstLine;
     grid-column-end: lastLine;
   }
 
-  .photo-container {
+  div.photo-container {
     padding: 0;
     border: 0;
     cursor: pointer;
@@ -147,7 +147,7 @@
     position: relative;
   }
 
-  .grid-container {
+  div.grid-container {
     width: 100%;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

package/dist/Pricing.svelte

@@ -456,7 +456,7 @@
     border-collapse: collapse;
   }
 
-  .pricing-table-global td {
+  table.pricing-table-global td {
     padding: 1.5rem;
   }
 
@@ -521,7 +521,7 @@
     }
   }
 
-  .main-header {
+  th.main-header {
     font-weight: bolder;
   }
 </style>

package/dist/PricingShort.svelte

@@ -99,7 +99,7 @@
 </div>
 
 <style>
-  .pricing-short-wrapper {
+  div.pricing-short-wrapper {
     color: var(--main-font-color);
     background-color: var(--main-bg-color);
 
@@ -113,7 +113,7 @@
     }
   }
 
-  .pricing-short-wrapper h3 {
+  div.pricing-short-wrapper h3 {
     margin-top: 0;
     margin-bottom: 0;
   }

package/dist/Section.svelte

@@ -80,7 +80,7 @@
 
 <svelte:window bind:innerWidth={clientWidth} />
 
-<section style={widthStyle}>
+<section class="wrapper" style={widthStyle}>
   {#if header}
     <h2>{translatedHeader}</h2>
   {/if}
@@ -165,11 +165,11 @@
 </section>
 
 <style>
-  .block-container {
+  div.block-container {
     position: relative;
   }
 
-  section {
+  section.wrapper {
     margin-top: 1.5rem;
     margin-bottom: 0.5rem;
     display: flex;
@@ -177,7 +177,7 @@
     width: 100%;
   }
 
-  .content {
+  div.content {
     display: grid;
     width: 100%;
     gap: 1rem;

package/dist/Text.svelte

@@ -46,13 +46,13 @@
 </div>
 
 <style>
-  .container {
+  div.container {
     position: relative;
     height: 100%;
     width: 100%;
     background-color: var(--main-bg-color);
 
-    .content {
+    div.content {
       width: 100%;
       height: 100%;
 
@@ -69,7 +69,7 @@
         text-align: left;
       }
     }
-    .extended {
+    div.content.extended {
       :global(h1) {
         font-size: var(--font-size-header-1);
         text-align: left;

package/dist/basic/Avatar.svelte

@@ -18,9 +18,7 @@
     const data = encoder.encode(lowerCased);
     const hashBuffer = await window.crypto.subtle.digest('SHA-256', data);
     const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
-    const hashed = hashArray
-      .map((b) => b.toString(16).padStart(2, '0'))
-      .join('');
+    const hashed = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
     return hashed;
   };
 
@@ -45,7 +43,7 @@
 </div>
 
 <style>
-  .avatar-container {
+  div.avatar-container {
     border: var(--avatar-border);
     border-radius: 50%;
     overflow: hidden;

package/dist/basic/Button.svelte

@@ -261,15 +261,15 @@
 {/if}
 
 <style>
-  .disabled {
+  button.disabled {
     filter: grayscale(1) opacity(0.5);
   }
 
-  .pressed {
+  button.pressed {
     filter: hue-rotate(120deg);
   }
 
-  .button {
+  button.button {
     box-sizing: content-box;
 
     font-size: 100%;
@@ -291,25 +291,25 @@
 
     -webkit-tap-highlight-color: transparent;
   }
-  .button:focus {
+  button.button:focus {
     outline-style: none;
     filter: var(--button-focus-filter);
   }
 
-  .button.danger {
+  button.button.danger {
     background-color: var(--button-danger-bg-color);
     color: var(--button-danger-font-color);
   }
 
-  .button:enabled:active {
+  button.button:enabled:active {
     filter: blur(0.1rem);
   }
 
-  .button .button-icon {
+  button.button .button-icon {
     display: inline-block;
   }
 
-  .button .button-text {
+  button.button .button-text {
     display: inline-block;
     font-weight: bold;
     user-select: none;
@@ -322,11 +322,11 @@
     margin-right: 0.4rem;
   }
 
-  .button.danger .button-text {
+  button.button.danger .button-text {
     color: var(--button-danger-font-color);
   }
 
-  .button:disabled {
+  button.button:disabled {
     cursor: default;
   }
 </style>

package/dist/basic/Notes.svelte

@@ -35,7 +35,7 @@
 ></div>
 
 <style>
-  .question-input {
+  div.question-input {
     position: relative;
 
     min-width: 400px;
@@ -60,13 +60,13 @@
     background-repeat: repeat;
   }
 
-  .question-input.disabled {
+  div.question-input.disabled {
     border: var(--disabled-border);
     font: var(--notes-disabled-font-color);
     background-color: var(--notes-disabled-bg-color);
   }
 
-  .question-input::after {
+  div.question-input::after {
     content: '';
     position: absolute;
     border: var(--notes-vert-line);
@@ -74,7 +74,7 @@
     top: 0;
     bottom: 0;
   }
-  .question-input::before {
+  div.question-input::before {
     content: '';
     position: absolute;
     border: var(--notes-vert-line);

package/dist/basic/Spinner.svelte

@@ -49,7 +49,7 @@
 </svelte:head>
 
 <style>
-  .background {
+  div.background {
     height: 100vh;
     width: 100vw;
     background-color: rgba(245, 245, 245, 0.7);
@@ -64,4 +64,3 @@
     align-items: center;
   }
 </style>
-

package/dist/basic/TextInput.svelte

@@ -255,20 +255,20 @@
 </div>
 
 <style>
-  .translating {
+  input.translating {
     filter: drop-shadow(0 0 1rem #baa5c3);
     border-color: #3d704d;
     box-shadow: 0 0 0.5rem #baa5c3;
   }
 
-  .input-wrapper {
+  div.input-wrapper {
     display: flex;
     flex-direction: column;
     position: relative;
     align-self: flex-start;
   }
 
-  .margin-for-message {
+  div.margin-for-message {
     margin-top: 1rem;
   }
 
@@ -310,13 +310,13 @@
     position: absolute;
   }
 
-  .message-wrapper {
+  div.message-wrapper {
     height: 1rem;
     top: -1rem;
     position: absolute;
   }
 
-  .message {
+  span.message {
     color: var(--alert-font-color);
     font-style: italic;
 
@@ -324,7 +324,7 @@
     white-space: nowrap;
   }
 
-  .message.valid {
+  span.message.valid {
     color: var(--accept-font-color);
   }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "accomadesc",
-	"version": "0.2.20",
+	"version": "0.2.21",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",