@iamproperty/components 7.7.1--beta5 → 7.7.1--beta7

package/assets/sass/components/table-basic.global.scss

@@ -4,7 +4,7 @@
 
 $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax';
 
-// #region Basic table stuff
+/* #region Basic table stuff */
 
 @layer components {
 :is(#{$selector}) {
@@ -48,15 +48,15 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
   }
     */
 }
-// #endregion
+/* #endregion */
 
-// #region Pagination
+/* #region Pagination */
 :is(#{$selector}) table:has(tr.show) tbody tr:not(.show) {
   display: none !important;
 }
-// #endregion
+/* #endregion */
 
-// #region Tables are only stacked on mobile
+/* #region Tables are only stacked on mobile */
 :is(#{$selector}):not(.table--fullwidth) {
   td:has([data-expand-button]),
   .expand-button-heading {
@@ -200,9 +200,9 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region CTA column
+/* #region CTA column */
 
 :is(#{$selector}):not(.table--fullwidth).table--cta {
   @container (width < 23.4375em) {
@@ -246,9 +246,9 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Statuses
+/* #region Statuses */
 table {
   .hide-status:after {
     display: none;
@@ -368,9 +368,9 @@ table {
     color: var(--colour-primary);
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Tables are only stacked on mobile
+/* #region Tables are only stacked on mobile */
 :is(#{$selector}):not(.table--fullwidth).table--cta {
   @container (width < 23.4375em) {
     tbody tr td:last-child {
@@ -380,9 +380,9 @@ table {
 }
 
 
-// #endregion
+/* #endregion */
 
-// #region As part of the iam-table component
+/* #region As part of the iam-table component */
 
 :is(#{$selector}) iam-actionbar {
   margin: 0 1.5rem 1rem 1.5rem;
@@ -408,7 +408,7 @@ table {
     background-color: #e6eaec;
 }
 
-// Actionbar
+/*  Actionbar */
 .actionbar__sticky-wrapper {
   container-type: inline-size;
 
@@ -444,7 +444,7 @@ table {
     display: block;
     border: none;
     background: var(--colour-canvas-2);
-    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    /* box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); */
     border-radius: 0.5rem;
     margin-bottom: 1.5rem;
   }
@@ -458,9 +458,9 @@ table {
     margin-bottom: 2rem;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Table with actionbar
+/* #region Table with actionbar */
 
 :is(#{$selector}) {
   input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
@@ -564,10 +564,10 @@ table {
   }
 }
 }
-// #endregion
+/* #endregion */
 
 
-// #region Highlighted row
+/* #region Highlighted row */
 :is(#{$selector}):not(.table--fullwidth) {
 
 
@@ -652,10 +652,10 @@ table {
     }
   }
 }
-// #endregion
+/* #endregion */
 
 
-// #region Mobile view when in admin panel
+/* #region Mobile view when in admin panel */
 .admin-panel :is(#{$selector}):not(.table--fullwidth) {
   @container (width < 23.4375em) {
 
@@ -673,4 +673,4 @@ table {
 
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/table.component.scss

@@ -4,15 +4,15 @@
 
 @use './table-basic.component';
 
-// #region Table with actionbar
+/* #region Table with actionbar */
 @container (width < 23.4375em) {
   .table__wrapper.has-actionbar {
     margin-top: calc(-100vh - -6.75rem) !important;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Loading via ajax
+/* #region Loading via ajax */
 :host(.table--loading) {
   pointer-events: none;
   position: relative;
@@ -48,4 +48,4 @@
 
 
 
-// #endregion
+/* #endregion */

package/assets/sass/components/table.global.scss

@@ -9,7 +9,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 @use '../utilities/display' as *;
 
-// #region Tables are only stacked on mobile
+/* #region Tables are only stacked on mobile */
 :is(#{$selector}):not(.table--fullwidth).table--cta {
   @container (width < 23.4375em) {
     tbody tr td:last-child {
@@ -42,7 +42,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
   border-radius: 0;
 }
 
-// Actionbar
+/*  Actionbar */
 .actionbar__sticky-wrapper {
   container-type: inline-size;
 
@@ -78,7 +78,7 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     display: block;
     border: none;
     background: var(--colour-canvas-2);
-    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    /* box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); */
     border-radius: 0.5rem;
     margin-bottom: 1.5rem;
   }
@@ -92,9 +92,9 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     margin-bottom: 2rem;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Table with actionbar
+/* #region Table with actionbar */
 
 :is(#{$selector}) {
   input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
@@ -171,9 +171,9 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region Expandable tables
+/* #region Expandable tables */
 :is(#{$selector})[data-expandable] {
   td:has([data-expand-button]),
   .expand-button-heading {
@@ -225,9 +225,9 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region fixed columns
+/* #region fixed columns */
 :is(#{$selector}):not(.table--fullwidth) {
   @container (width < 23.4375em) {
     tr {
@@ -310,16 +310,16 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
     }
   }
 }
-// #endregion
+/* #endregion */
 
-// #region
+/*  #region */
 :is(#{$selector})td:has(.dialog__wrapper) {
   padding-top: 0.25rem;
 }
 
-// #endregion
+/* #endregion */
 
-// #region sort by column header
+/* #region sort by column header */
 
 :is(#{$selector}) {
 
@@ -359,27 +359,27 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 
 }
 
-// #endregion
+/* #endregion */
 
-// #region hide columns
+/* #region hide columns */
 @for $i from 1 through 30 {
   :is(#{$selector}) [data-hide-col#{$i}] + table :is(thead, tbody) :is(th, td):nth-child(#{$i}) {
     display: none;
   }
 }
-// #endregion
+/* #endregion */
 
-// #region filters
+/* #region filters */
 :is(#{$selector}) .table--filtered tbody tr:not(.filtered--show) {
   display: none !important;
 }
 
 :is(#{$selector}) table:not(.table--filtered):not(.table--ajax) tbody tr:nth-child(15) ~ tr {
-  //display: none;
+  /* display: none; */
 }
-// #endregion
+/* #endregion */
 
-// #region max height tables
+/* #region max height tables */
 
 iam-table-basic:is(.mh-lg, .mh-md, .mh-sm) {
   thead {
@@ -395,4 +395,4 @@ iam-table-basic:is(.mh-lg, .mh-md, .mh-sm) {
   }
 }
 
-// #endregion
+/* #endregion */

package/assets/sass/components/tabs.config.scss

@@ -142,10 +142,10 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       position: absolute;
       content: '';
       bottom: 0;
-      left: 50%; // half way across
+      left: 50%; /*  half way across */
       height: 3px;
       width: 100%;
-      transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
+      transform: translate(-50%, 0) scale(0, 0); /*  translate pulls this left so it's centered */
       background: var(--colour-tab-underline, var(--colour-info));
       transition: transform 0.4s;
     }
@@ -183,7 +183,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-// #region admin-panel links
+/* #region admin-panel links */
 .admin-panel :is(.admin-panel__links, .tabs__links) {
   padding: 0;
   margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
@@ -206,7 +206,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 
   .link:not(.text-decoration-none):not(.btn) {
     margin: 0;
-    //margin-left: calc(var(--wrapper-padding) * -1);
+    /* margin-left: calc(var(--wrapper-padding) * -1); */
     padding: 1rem var(--padding-x);
     width: 100%;
     position: relative;
@@ -245,7 +245,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-// #endregion
+/* #endregion */
 @media screen and (min-width: 36em) {
   :host(.tabs--inline) .tabs__links {
     margin: 0;

package/assets/sass/components/testimonial.scss

@@ -9,7 +9,7 @@
     --testimonial-spacing: 2rem;
   }
 
-  // Circle
+  /*  Circle */
   > div:first-child {
     position: relative;
     overflow: hidden;
@@ -71,7 +71,7 @@
     }
   }
 
-  // Make space for the circle
+  /*  Make space for the circle */
   h2 {
     padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
 
@@ -98,7 +98,7 @@
     }
   }
 
-  // Only show 1 blockquote at a time
+  /*  Only show 1 blockquote at a time */
   @for $i from 1 through 10 {
     &[data-show='#{$i}'] blockquote:not(:nth-child(#{$i})) {
       display: var(--display-none);

package/assets/sass/components/video-card.component.scss

@@ -13,7 +13,7 @@
   font-size: 1.5rem;
 }
 
-// #region video-card--top
+/* #region video-card--top */
 :host(:not(.video-card--top)) .card__head {
   order: 2;
 }
@@ -46,4 +46,4 @@
     }
   }
 }
-// #endregion
+/* #endregion */

package/assets/sass/components/word-count.component.scss

@@ -1,6 +1,6 @@
 @use '../_func' as *;
 
-// #region word counter
+/* #region word counter */
 :host {
   display: block;
   max-width: var(--input-max-width, 50rem);
@@ -13,9 +13,9 @@
 
 ::slotted(span)::before {
   display: inline-block;
-  //counter-reset: variable var(--char-count) var(--maxlength);
-  //counter-reset: variable2 var(--maxlength);
-  //content: attr(data-count) ' / ' var(--maxlength);
+  /* counter-reset: variable var(--char-count) var(--maxlength); */
+  /* counter-reset: variable2 var(--maxlength); */
+  /* content: attr(data-count) ' / ' var(--maxlength); */
 
   content: attr(data-count) ' / ' attr(data-max);
   float: right;
@@ -23,4 +23,4 @@
   margin: 0 0 1em 1em;
 }
 
-// #endregion
+/* #endregion */

package/assets/sass/elements/{buttons--global.scss → buttons--global.css}

@@ -1,39 +1,30 @@
 @layer elements {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
 
-  // #region reset
+  /* #region reset */
   button {
-    
     border-radius: 0;
     text-transform: none;
-    margin: 0; // 1
+    margin: 0;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
   }
 
-  [role='button'] {
-    cursor: pointer;
-  }
   button:focus:not(:focus-visible) {
     outline: 0;
   }
 
-  :is(button,[type="button"],[type="reset"],[type="submit"]) {
-    -webkit-appearance: button; // 2
+  :is(button,[type="button"],[type="reset"],[type="submit"],[role='button']) {
+    -webkit-appearance: button;
 
     &:not(:disabled) {
-      cursor: pointer; // 3
+      cursor: pointer;
     }
   }
-  // #endregion
+  /* #endregion */
 
 
-  // #region button primary
+  /* #region button primary */
   .btn {
     --btn-margin: 1rem;
     --btn-padding-block: 0.75rem;
@@ -89,38 +80,38 @@
     &:not(:last-child) {
       margin-right: var(--btn-margin);
     }
+  }
 
-    a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
-    &:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
-      outline: 0;
-      text-decoration: none;
+  a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) .btn,
+  .btn:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
+    outline: 0;
+    text-decoration: none;
 
-      background: var(--colour-btn-bg-hover);
-      color: var(--colour-btn-hover);
-      border-radius: 1.5rem;
-    }
+    background: var(--colour-btn-bg-hover);
+    color: var(--colour-btn-hover);
+    border-radius: 1.5rem;
+  }
 
-    a:is(:active, .active):not([disabled]) &,
-    &:is(:active, .active):not([disabled]) {
-      filter: brightness(85%);
-      transition:
-        background 0.1s,
-        color 0.1s;
-      color: var(--colour-btn);
-      border-radius: 1.5rem;
-    }
+  a:is(:active, .active):not([disabled]) .btn,
+  .btn:is(:active, .active):not([disabled]) {
+    filter: brightness(85%);
+    transition:
+      background 0.1s,
+      color 0.1s;
+    color: var(--colour-btn);
+    border-radius: 1.5rem;
+  }
 
-    a:disabled &,
-    &:disabled,
-    [disabled] &,
-    &[disabled] {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
+  a:disabled .btn,
+  .btn:disabled,
+  [disabled] .btn,
+  .btn[disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region btn with colour success
+  /* #region btn with colour success */
   .btn.btn-complete {
     --colour: var(--colour-success);
     --colour-btn-bg-hover: var(--colour);
@@ -132,46 +123,46 @@
     position: relative;
     padding-left: 3.5rem; /*56 */
     padding-right: 3.5rem; /*56 */
+  }
 
-    a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
-    &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
-      padding-left: 2.5rem;
-      padding-right: 2.5rem;
-
-      &:before {
-        content: '\f00c';
-        font-family: 'Font Awesome 7 Pro';
-        margin-right: 1rem;
-        font-style: inherit;
-        width: 1rem;
-        display: inline-block;
-        height: var(--btn-line-height);
-        vertical-align: bottom;
-      }
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) .btn.btn-complete,
+  .btn.btn-complete:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+
+    &:before {
+      content: '\f00c';
+      font-family: 'Font Awesome 7 Pro';
+      margin-right: 1rem;
+      font-style: inherit;
+      width: 1rem;
+      display: inline-block;
+      height: var(--btn-line-height);
+      vertical-align: bottom;
     }
   }
-  // #endregion
+  /* #endregion */
 
-  // #region button small and tag
+  /* #region button small and tag */
   .btn.btn-sm {
     --btn-padding-block: 0.5rem;
     --btn-padding-inline: 2rem;
     --btn-margin: 0.5rem;
     --btn-font-size: 1rem;
   }
-  // #endregion
+  /* #endregion */
 
-  // #region button with icon
+  /* #region button with icon */
   .btn {
     &[class*='fa-']:before {
       content: var(--fa);
       font-family: 'Font Awesome 7 Pro';
     }
 
-    &.btn[class*='fa-after'] {
+    &[class*='fa-after'] {
       padding-right: 4rem;
     }
-    &.btn[class*='fa-after']:before {
+    &[class*='fa-after']:before {
       margin-right: 0;
       margin-right: 0.375rem; /* 6 */
       position: absolute;
@@ -197,10 +188,9 @@
       }
     }
   }
-  // #endregion
+  /* #endregion */
 
-
-  // #region button with prompt
+  /* #region button with prompt */
   .btn.btn--prompt {
     &:after {
       content: '';
@@ -219,19 +209,18 @@
       vertical-align: bottom;
       margin-left: 1rem;
     }
-
-    a:is(:hover, :focus, .hover):not([disabled], :active, .active) &,
-    &:is(:hover, :focus, .hover):not([disabled], :active, .active) {
-      &:after {
-        margin-left: 1.5rem;
-        margin-right: -0.5rem;
-      }
+  }
+    
+  a:is(:hover, :focus, .hover):not([disabled], :active, .active) .btn.btn--prompt,
+  .btn.btn--prompt:is(:hover, :focus, .hover):not([disabled], :active, .active) {
+    &:after {
+      margin-left: 1.5rem;
+      margin-right: -0.5rem;
     }
   }
-  // #endregion
+  /* #endregion */
 
-  
-  // #region button that opens up a filter dialog
+  /* #region button that opens up a filter dialog */
   .btn-filter {
     &:after {
       content: '\f1de';
@@ -246,5 +235,5 @@
       font-family: 'Font Awesome 7 Pro';
     }
   }
-  // #endregion
+  /* #endregion */
 }

package/assets/sass/elements/{buttons--secondary.scss → buttons--secondary.css}

@@ -1,11 +1,5 @@
-@use '../_func' as *;
-
-
-
-
-
 @layer elements {
-  // #region secondary button
+  /* #region secondary button */
   .btn-secondary {
     color: var(--colour-btn-secondary);
 
@@ -20,5 +14,5 @@
     background: var(--colour-btn-secondary-bg-hover);
     color: var(--colour-btn-secondary-hover);
   }
-  // #endregion
+  /* #endregion */
 }