@hkdigital/lib-sveltekit 0.2.21 → 0.2.22

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

@@ -1,146 +1,146 @@
-
-  [data-component='button'] {
-    /* ---- Core Button Variables ---- */
-
-    /* Size variables */
-    --btn-min-width: calc(150px * var(--scale-ui));
-    --btn-min-height: calc(40px * var(--scale-ui));
-
-    /* ---- Primary Button Variables ---- */
-    --btn-primary-bg: var(--color-primary-500);
-    --btn-primary-text: var(--color-primary-50);
-    --btn-primary-border: var(--color-primary-500);
-
-    --btn-primary-selected-bg: var(--color-primary-700);
-    --btn-primary-selected-text: var(--color-primary-50);
-    --btn-primary-selected-border: var(--color-primary-800);
-
-    --btn-primary-hover-bg: var(--color-primary-600);
-    --btn-primary-hover-border: var(--color-primary-600);
-    --btn-primary-focus-outline: var(--color-primary-800);
-
-    /* ---- Secondary Button Variables ---- */
-    --btn-secondary-bg: transparent;
-    --btn-secondary-text: var(--color-secondary-500);
-    --btn-secondary-border: var(--color-secondary-500);
-
-    --btn-secondary-selected-bg: var(--color-secondary-100);
-    --btn-secondary-selected-text: var(--color-secondary-800);
-    --btn-secondary-selected-border: var(--color-secondary-600);
-
-    --btn-secondary-hover-bg: var(--color-secondary-50);
-    --btn-secondary-hover-border: var(--color-secondary-500);
-    --btn-secondary-focus-outline: var(--color-secondary-800);
-
-    /* ---- State Variables ---- */
-    --btn-active-transform: scale(0.98);
-    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-
-    --btn-error-border: var(--color-error-500);
-    --btn-loading-opacity: 0.8;
-
-    /* Appearance variations */
-    --btn-border-width: 2px;
-    --btn-transition-duration: 150ms;
-    --btn-disabled-opacity: 0.6;
-    --btn-focus-ring-width: 3px;
-    --btn-focus-ring-opacity: 0.4;
-
-    /* Base styles */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    transition-property:
-      background-color, color, border-color, transform, box-shadow;
-    transition-duration: var(--btn-transition-duration);
-  }
-
-  /* Size variants */
-  /*[data-component="button"][data-size="sm"] {
-    @apply rounded-xs;
-    @apply py-8ut px-8ut;
-    @apply min-w-24ut min-h-24ut;
-  }*/
-
-  /*[data-component="button"][data-size="lg"] {
-    @apply rounded-sm;
-    @apply py-16ut px-36ut;
-    @apply min-w-36ut min-h-36ut;
-  }*/
-
-  /* Role-based styling for primary buttons */
-  [data-component='button'][data-role='primary'] {
-    @apply border-width-normal;
-    border-color: var(--btn-primary-border);
-    background-color: var(--btn-primary-bg);
-    color: var(--btn-primary-text);
-
-    &:hover:not(:disabled):not(.state-selected) {
-      border-color: var(--btn-primary-hover-border);
-      background-color: var(--btn-primary-hover-bg);
-    }
-
-    &:focus-visible {
-      @apply outline-normal outline-offset-normal;
-      outline-color: var(--btn-primary-focus-outline);
-    }
-
-    &.state-selected {
-      background-color: var(--btn-primary-selected-bg);
-      border-color: var(--btn-primary-selected-border);
-      color: var(--btn-primary-selected-text);
-    }
-  }
-
-  /* Role-based styling for secondary buttons */
-  [data-component='button'][data-role='secondary'] {
-    @apply border-width-normal;
-    border-color: var(--btn-secondary-border);
-    color: var(--btn-secondary-text);
-    background-color: var(--btn-secondary-bg);
-
-    &:hover:not(:disabled):not(.state-selected) {
-      background-color: var(--btn-secondary-hover-bg);
-      border-color: var(--btn-secondary-hover-border);
-    }
-
-    &:focus-visible {
-      @apply outline outline-normal outline-offset-normal;
-      outline-color: var(--btn-secondary-focus-outline);
-    }
-
-    &.state-selected {
-      background-color: var(--btn-secondary-selected-bg);
-      border-color: var(--btn-secondary-selected-border);
-      color: var(--btn-secondary-selected-text);
-    }
-  }
-
-  /* State-based styling for primary and secondary buttons */
-
-  [data-component='button'][data-role='primary'],
-  [data-component='button'][data-role='secondary'] {
-    &.state-active {
-      transform: var(--btn-active-transform);
-      box-shadow: var(--btn-active-shadow);
-    }
-
-    &.state-error {
-      border-color:var(--btn-error-border);
-    }
-
-    &.state-loading {
-      opacity: var(--btn-loading-opacity);
-      cursor: wait;
-    }
-  }
-
-  /* Disabled state */
-  [data-component='button']:disabled {
-    cursor: not-allowed;
-    opacity: var(--btn-disabled-opacity);
-    pointer-events: none;
-  }
-
+
+  [data-component='button'] {
+    /* ---- Core Button Variables ---- */
+
+    /* Size variables */
+    --btn-min-width: calc(150px * var(--scale-ui));
+    --btn-min-height: calc(40px * var(--scale-ui));
+
+    /* ---- Primary Button Variables ---- */
+    --btn-primary-bg: var(--color-primary-500);
+    --btn-primary-text: var(--color-primary-50);
+    --btn-primary-border: var(--color-primary-500);
+
+    --btn-primary-selected-bg: var(--color-primary-700);
+    --btn-primary-selected-text: var(--color-primary-50);
+    --btn-primary-selected-border: var(--color-primary-800);
+
+    --btn-primary-hover-bg: var(--color-primary-600);
+    --btn-primary-hover-border: var(--color-primary-600);
+    --btn-primary-focus-outline: var(--color-primary-800);
+
+    /* ---- Secondary Button Variables ---- */
+    --btn-secondary-bg: transparent;
+    --btn-secondary-text: var(--color-secondary-500);
+    --btn-secondary-border: var(--color-secondary-500);
+
+    --btn-secondary-selected-bg: var(--color-secondary-100);
+    --btn-secondary-selected-text: var(--color-secondary-800);
+    --btn-secondary-selected-border: var(--color-secondary-600);
+
+    --btn-secondary-hover-bg: var(--color-secondary-50);
+    --btn-secondary-hover-border: var(--color-secondary-500);
+    --btn-secondary-focus-outline: var(--color-secondary-800);
+
+    /* ---- State Variables ---- */
+    --btn-active-transform: scale(0.98);
+    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+    --btn-error-border: var(--color-error-500);
+    --btn-loading-opacity: 0.8;
+
+    /* Appearance variations */
+    --btn-border-width: 2px;
+    --btn-transition-duration: 150ms;
+    --btn-disabled-opacity: 0.6;
+    --btn-focus-ring-width: 3px;
+    --btn-focus-ring-opacity: 0.4;
+
+    /* Base styles */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition-property:
+      background-color, color, border-color, transform, box-shadow;
+    transition-duration: var(--btn-transition-duration);
+  }
+
+  /* Size variants */
+  /*[data-component="button"][data-size="sm"] {
+    @apply rounded-xs;
+    @apply py-8ut px-8ut;
+    @apply min-w-24ut min-h-24ut;
+  }*/
+
+  /*[data-component="button"][data-size="lg"] {
+    @apply rounded-sm;
+    @apply py-16ut px-36ut;
+    @apply min-w-36ut min-h-36ut;
+  }*/
+
+  /* Role-based styling for primary buttons */
+  [data-component='button'][data-role='primary'] {
+    @apply border-width-normal;
+    border-color: var(--btn-primary-border);
+    background-color: var(--btn-primary-bg);
+    color: var(--btn-primary-text);
+
+    &:hover:not(:disabled):not(.state-selected) {
+      border-color: var(--btn-primary-hover-border);
+      background-color: var(--btn-primary-hover-bg);
+    }
+
+    &:focus-visible {
+      @apply outline-normal outline-offset-normal;
+      outline-color: var(--btn-primary-focus-outline);
+    }
+
+    &.state-selected {
+      background-color: var(--btn-primary-selected-bg);
+      border-color: var(--btn-primary-selected-border);
+      color: var(--btn-primary-selected-text);
+    }
+  }
+
+  /* Role-based styling for secondary buttons */
+  [data-component='button'][data-role='secondary'] {
+    @apply border-width-normal;
+    border-color: var(--btn-secondary-border);
+    color: var(--btn-secondary-text);
+    background-color: var(--btn-secondary-bg);
+
+    &:hover:not(:disabled):not(.state-selected) {
+      background-color: var(--btn-secondary-hover-bg);
+      border-color: var(--btn-secondary-hover-border);
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: var(--btn-secondary-focus-outline);
+    }
+
+    &.state-selected {
+      background-color: var(--btn-secondary-selected-bg);
+      border-color: var(--btn-secondary-selected-border);
+      color: var(--btn-secondary-selected-text);
+    }
+  }
+
+  /* State-based styling for primary and secondary buttons */
+
+  [data-component='button'][data-role='primary'],
+  [data-component='button'][data-role='secondary'] {
+    &.state-active {
+      transform: var(--btn-active-transform);
+      box-shadow: var(--btn-active-shadow);
+    }
+
+    &.state-error {
+      border-color:var(--btn-error-border);
+    }
+
+    &.state-loading {
+      opacity: var(--btn-loading-opacity);
+      cursor: wait;
+    }
+  }
+
+  /* Disabled state */
+  [data-component='button']:disabled {
+    cursor: not-allowed;
+    opacity: var(--btn-disabled-opacity);
+    pointer-events: none;
+  }
+

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

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

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

@@ -1,73 +1,73 @@
-
-  [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;
-    }
-  }
-
+
+  [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,58 +1,58 @@
-/* Visual styling and customizable aspects */
-[data-component='drop-zone'] {
-  /*min-height: 100px;*/
-  border: 1px dashed var(--color-surface-400);
-  border-radius: var(--theme-rounded-container);
-  /*padding: 1rem;*/
-  transition: all 0.2s ease;
-  position: relative;
-  background-color: --alpha(var(--color-surface-50) / 0.5);
-
-  /* State-based styling using state classes - visual aspects only */
-  &.state-ready {
-    border-color: var(--color-surface-400);
-    background-color: transparent;
-  }
-
-  &.state-drag-over {
-    border-color: var(--color-primary-400);
-    background-color: color-mix(
-      in oklch,
-      var(--color-primary-500) 5%,
-      transparent
-    );
-  }
-  &.state-can-drop {
-    border-color: var(--color-success-500);
-    background-color: color-mix(
-      in oklch,
-      var(--color-success-500) 8%,
-      transparent
-    );
-    box-shadow: 0 0 0 3px
-      color-mix(in oklch, var(--color-success-500) 20%, transparent);
-  }
-
-  &.state-cannot-drop {
-    border-color: var(--color-error-500);
-    background-color: color-mix(
-      in oklch,
-      var(--color-error-500) 8%,
-      transparent
-    );
-    cursor: not-allowed;
-  }
-
-  /*&.state-drop-disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      background-color: 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;
-}
+/* Visual styling and customizable aspects */
+[data-component='drop-zone'] {
+  /*min-height: 100px;*/
+  border: 1px dashed var(--color-surface-400);
+  border-radius: var(--theme-rounded-container);
+  /*padding: 1rem;*/
+  transition: all 0.2s ease;
+  position: relative;
+  background-color: --alpha(var(--color-surface-50) / 0.5);
+
+  /* State-based styling using state classes - visual aspects only */
+  &.state-ready {
+    border-color: var(--color-surface-400);
+    background-color: transparent;
+  }
+
+  &.state-drag-over {
+    border-color: var(--color-primary-400);
+    background-color: color-mix(
+      in oklch,
+      var(--color-primary-500) 5%,
+      transparent
+    );
+  }
+  &.state-can-drop {
+    border-color: var(--color-success-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-success-500) 8%,
+      transparent
+    );
+    box-shadow: 0 0 0 3px
+      color-mix(in oklch, var(--color-success-500) 20%, transparent);
+  }
+
+  &.state-cannot-drop {
+    border-color: var(--color-error-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-500) 8%,
+      transparent
+    );
+    cursor: not-allowed;
+  }
+
+  /*&.state-drop-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: 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,16 +1,16 @@
-/* @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;
-  }
+/* @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;
+  }
 }