@hkdigital/lib-sveltekit 0.2.8 → 0.2.9

package/dist/themes/hkdev/components/buttons/skip-button.css

@@ -1,6 +1,6 @@
-@import '../../global/on-colors.css';
-
-@define-mixin buttons-skip-button {
-  [data-button='skip-button'] {
-  }
-}
+@import '../../global/on-colors.css';
+
+@define-mixin buttons-skip-button {
+  [data-button='skip-button'] {
+  }
+}

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -1,73 +1,73 @@
-@define-mixin component-draggable {
-  [data-component='draggable'] {
-    user-select: none;
-    transition:
-      opacity 0.2s ease,
-      transform 0.2s ease;
-  }
-
-  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
-    cursor: grab; /* Open hand when hovering draggable items */
-  }
-
-  /*[data-component='draggable']:active {
-    cursor: grabbing;
-  }*/
-
-  /* State-based styling using state classes */
-  [data-component='draggable'].state-idle {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  [data-component='draggable'].state-dragging {
-    opacity: 0.5;
-    transform: scale(0.95);
-    cursor: grabbing;
-  }
-
-  [data-component='draggable'].state-drag-preview {
-    transform: scale(0.98);
-    filter: brightness(0.95);
-  }
-
-  [data-component='draggable'].state-dropping {
-    animation: drop-finish 0.2s ease-out;
-  }
-
-  [data-component='draggable'].state-drag-disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-    filter: grayscale(0.5);
-  }
-
-  /* Preview follower */
-
-  [data-companion='drag-preview-follower'] {
-    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
-  }
-
-  [data-companion='drag-preview-follower'].state-can-drop {
-    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
-  }
-
-  [data-companion='drag-preview-follower'].state-cannot-drop {
-    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
-  }
-
-  /* Animations */
-  @keyframes drop-finish {
-    0% {
-      transform: scale(0.95);
-      opacity: 0.8;
-    }
-    50% {
-      transform: scale(1.05);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-}
+@define-mixin component-draggable {
+  [data-component='draggable'] {
+    user-select: none;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
+    cursor: grab; /* Open hand when hovering draggable items */
+  }
+
+  /*[data-component='draggable']:active {
+    cursor: grabbing;
+  }*/
+
+  /* State-based styling using state classes */
+  [data-component='draggable'].state-idle {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-component='draggable'].state-dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+    cursor: grabbing;
+  }
+
+  [data-component='draggable'].state-drag-preview {
+    transform: scale(0.98);
+    filter: brightness(0.95);
+  }
+
+  [data-component='draggable'].state-dropping {
+    animation: drop-finish 0.2s ease-out;
+  }
+
+  [data-component='draggable'].state-drag-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(0.5);
+  }
+
+  /* Preview follower */
+
+  [data-companion='drag-preview-follower'] {
+    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
+  }
+
+  [data-companion='drag-preview-follower'].state-can-drop {
+    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
+  }
+
+  [data-companion='drag-preview-follower'].state-cannot-drop {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  }
+
+  /* Animations */
+  @keyframes drop-finish {
+    0% {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}

package/dist/themes/hkdev/components/drag-drop/drop-zone.css

@@ -1,48 +1,48 @@
-@define-mixin component-drop-zone {
-  /* Visual styling and customizable aspects */
-  [data-component='drop-zone'] {
-    /*min-height: 100px;*/
-    border: 1px dashed rgb(var(--color-surface-400));
-    border-radius: var(--theme-rounded-container);
-    /*padding: 1rem;*/
-    transition: all 0.2s ease;
-    position: relative;
-    background-color: rgb(var(--color-surface-50) / 0.5);
-
-    /* State-based styling using state classes - visual aspects only */
-    &.state-ready {
-      border-color: rgb(var(--color-surface-400));
-      background-color: transparent;
-    }
-
-    &.state-drag-over {
-      border-color: rgb(var(--color-primary-400));
-      background-color: rgb(var(--color-primary-500) / 0.05);
-    }
-
-    &.state-can-drop {
-      border-color: rgb(var(--color-success-500));
-      background-color: rgb(var(--color-success-500) / 0.08);
-      box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
-    }
-
-    &.state-cannot-drop {
-      border-color: rgb(var(--color-error-500));
-      background-color: rgb(var(--color-error-500) / 0.08);
-      cursor: not-allowed;
-    }
-
-    /*&.state-drop-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background-color: rgb(var(--color-surface-100));
-    }*/
-  }
-
-  /* Default styling for inner elements - all visual/customizable */
-  [data-layer='content'],
-  [data-layer='preview'],
-  [data-layer='empty'] {
-    @apply type-base-md;
-  }
-}
+@define-mixin component-drop-zone {
+  /* Visual styling and customizable aspects */
+  [data-component='drop-zone'] {
+    /*min-height: 100px;*/
+    border: 1px dashed rgb(var(--color-surface-400));
+    border-radius: var(--theme-rounded-container);
+    /*padding: 1rem;*/
+    transition: all 0.2s ease;
+    position: relative;
+    background-color: rgb(var(--color-surface-50) / 0.5);
+
+    /* State-based styling using state classes - visual aspects only */
+    &.state-ready {
+      border-color: rgb(var(--color-surface-400));
+      background-color: transparent;
+    }
+
+    &.state-drag-over {
+      border-color: rgb(var(--color-primary-400));
+      background-color: rgb(var(--color-primary-500) / 0.05);
+    }
+
+    &.state-can-drop {
+      border-color: rgb(var(--color-success-500));
+      background-color: rgb(var(--color-success-500) / 0.08);
+      box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
+    }
+
+    &.state-cannot-drop {
+      border-color: rgb(var(--color-error-500));
+      background-color: rgb(var(--color-error-500) / 0.08);
+      cursor: not-allowed;
+    }
+
+    /*&.state-drop-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: rgb(var(--color-surface-100));
+    }*/
+  }
+
+  /* Default styling for inner elements - all visual/customizable */
+  [data-layer='content'],
+  [data-layer='preview'],
+  [data-layer='empty'] {
+    @apply type-base-md;
+  }
+}

package/dist/themes/hkdev/components/icons/icon-steeze.css

@@ -1,22 +1,22 @@
-@define-mixin component-icon-steeze {
-
-  /* @note using CSS vars defined in the parent button postcss */
-
-  /* Type-based styling for text buttons */
-  [data-component="icon"][data-type="steeze"] {
-
-    &[data-size="sm"] {
-      @apply w-16bt h-16bt;
-    }
-
-    &[data-size="md"] {
-      @apply w-28bt h-28bt;
-    }
-
-    &[data-size="lg"] {
-      @apply w-50bt h-50bt;
-    }
-
-  }
-
-}
+@define-mixin component-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="icon"][data-type="steeze"] {
+
+    &[data-size="sm"] {
+      @apply w-16bt h-16bt;
+    }
+
+    &[data-size="md"] {
+      @apply w-28bt h-28bt;
+    }
+
+    &[data-size="lg"] {
+      @apply w-50bt h-50bt;
+    }
+
+  }
+
+}

package/dist/themes/hkdev/components/inputs/text-input.css

@@ -1,104 +1,104 @@
-/*@import "../../global/on-colors.css";*/
-
-@define-mixin inputs-text-input {
-  [data-input='text-input'] {
-    /* Base */
-
-    /* Required and disabled */
-
-    &.required {
-    }
-    &.disabled {
-    }
-
-    /* Focus */
-
-    &.focused {
-      border: solid thin black;
-
-      & [data-child='legend'] {
-        color: black;
-      }
-
-      & [data-child='input'] {
-        color: black;
-      }
-    }
-
-    &.unfocused {
-      border: solid thin grey;
-
-      & [data-child='legend'] {
-        color: grey;
-      }
-
-      & [data-child='input'] {
-        color: grey;
-      }
-    }
-
-    /* Invalid */
-    &.invalid {
-      &.pristine [data-child='legend'] {
-        color: white;
-        background-color: orange;
-      }
-
-      &.dirty {
-        &.focused [data-child='legend'] {
-          color: black;
-          background-color: yellow;
-        }
-
-        &.unfocused [data-child='legend'] {
-          color: white;
-          background-color: red;
-        }
-      }
-    }
-
-    /* Pristine (valid-invalid) */
-
-    &.pristine.valid {
-      & [data-child='icon-box'] {
-        color: grey;
-      }
-    }
-
-    &.pristine.invalid {
-      & [data-child='icon-box'] {
-        color: orange;
-      }
-    }
-
-    /* Dirty (valid-invalid) */
-
-    &.dirty.valid {
-      &.focused {
-        & [data-child='icon-box'] {
-          color: grey;
-        }
-      }
-
-      &.unfocused {
-        & [data-child='icon-box'] {
-          color: green;
-        }
-      }
-    }
-
-    &.dirty.invalid {
-      &.focused {
-        & [data-child='icon-box'] {
-          color: orange;
-        }
-      }
-
-      &.unfocused {
-        & [data-child='icon-box'] {
-          color: red;
-        }
-      }
-    }
-  }
-}
+/*@import "../../global/on-colors.css";*/
+
+@define-mixin inputs-text-input {
+  [data-input='text-input'] {
+    /* Base */
+
+    /* Required and disabled */
+
+    &.required {
+    }
+    &.disabled {
+    }
+
+    /* Focus */
+
+    &.focused {
+      border: solid thin black;
+
+      & [data-child='legend'] {
+        color: black;
+      }
+
+      & [data-child='input'] {
+        color: black;
+      }
+    }
+
+    &.unfocused {
+      border: solid thin grey;
+
+      & [data-child='legend'] {
+        color: grey;
+      }
+
+      & [data-child='input'] {
+        color: grey;
+      }
+    }
+
+    /* Invalid */
+    &.invalid {
+      &.pristine [data-child='legend'] {
+        color: white;
+        background-color: orange;
+      }
+
+      &.dirty {
+        &.focused [data-child='legend'] {
+          color: black;
+          background-color: yellow;
+        }
+
+        &.unfocused [data-child='legend'] {
+          color: white;
+          background-color: red;
+        }
+      }
+    }
+
+    /* Pristine (valid-invalid) */
+
+    &.pristine.valid {
+      & [data-child='icon-box'] {
+        color: grey;
+      }
+    }
+
+    &.pristine.invalid {
+      & [data-child='icon-box'] {
+        color: orange;
+      }
+    }
+
+    /* Dirty (valid-invalid) */
+
+    &.dirty.valid {
+      &.focused {
+        & [data-child='icon-box'] {
+          color: grey;
+        }
+      }
+
+      &.unfocused {
+        & [data-child='icon-box'] {
+          color: green;
+        }
+      }
+    }
+
+    &.dirty.invalid {
+      &.focused {
+        & [data-child='icon-box'] {
+          color: orange;
+        }
+      }
+
+      &.unfocused {
+        & [data-child='icon-box'] {
+          color: red;
+        }
+      }
+    }
+  }
+}

package/dist/themes/hkdev/components/panels/panel.css

@@ -1,27 +1,27 @@
-@define-mixin component-panel {
-  [data-component='panel'] {
-    @apply py-30up px-40up;
-    @apply rounded-md;
-
-    &[data-variant='light'] {
-      @apply bg-surface-50;
-    }
-
-    &[data-variant='dark'] {
-      @apply bg-surface-950;
-    }
-
-    /* Size variants */
-    &[data-width='sm'] {
-      width: calc(400px * var(--scale-ui));
-    }
-
-    &[data-width='md'] {
-      width: calc(600px * var(--scale-ui));
-    }
-
-    &[data-width='lg'] {
-      width: calc(800px * var(--scale-ui));
-    }
-  }
-}
+@define-mixin component-panel {
+  [data-component='panel'] {
+    @apply py-30up px-40up;
+    @apply rounded-md;
+
+    &[data-variant='light'] {
+      @apply bg-surface-50;
+    }
+
+    &[data-variant='dark'] {
+      @apply bg-surface-950;
+    }
+
+    /* Size variants */
+    &[data-width='sm'] {
+      width: calc(400px * var(--scale-ui));
+    }
+
+    &[data-width='md'] {
+      width: calc(600px * var(--scale-ui));
+    }
+
+    &[data-width='lg'] {
+      width: calc(800px * var(--scale-ui));
+    }
+  }
+}

package/dist/themes/hkdev/components/rows/panel-grid-row.css

@@ -1,6 +1,6 @@
-@import '../../global/on-colors.css';
-
-@define-mixin rows-panel-grid-row {
-  [data-row='panel-grid-row'] {
-  }
-}
+@import '../../global/on-colors.css';
+
+@define-mixin rows-panel-grid-row {
+  [data-row='panel-grid-row'] {
+  }
+}

package/dist/themes/hkdev/components/rows/panel-row-2.css

@@ -1,7 +1,7 @@
-@import '../../global/on-colors.css';
-
-@define-mixin rows-panel-row-2 {
-  [data-row='panel-grid-row'][data-wrapper='panel-row-2'] {
-    @apply gap-20p mb-8p mt-8p;
-  }
-}
+@import '../../global/on-colors.css';
+
+@define-mixin rows-panel-row-2 {
+  [data-row='panel-grid-row'][data-wrapper='panel-row-2'] {
+    @apply gap-20p mb-8p mt-8p;
+  }
+}