webcake-ui-kit 1.1.4 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/button/Button.vue

@@ -53,7 +53,7 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v)
+      validator: v => ['mini', 'xs', 'sm', 'md', 'lg', 'xl'].includes(v)
     },
     roundness: {
       type: String,

package/src/components/button/button.css

@@ -34,7 +34,7 @@
 /* ============================================================
    Sizes
    ============================================================ */
-.ui-btn--xs {
+.ui-btn--mini {
   height: 24px;
   padding: var(--spacing-3) var(--spacing-xs);
   gap: var(--spacing-6);
@@ -42,6 +42,22 @@
   line-height: var(--paragraph-mini-line-height);
   letter-spacing: var(--paragraph-mini-letter-spacing);
 }
+
+.ui-btn--mini .ui-btn__icon,
+.ui-btn--mini ::v-deep svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-btn--xs {
+  height: 28px;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  gap: var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
 .ui-btn--xs .ui-btn__icon,
 .ui-btn--xs ::v-deep svg {
   width: 16px;
@@ -56,6 +72,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--sm .ui-btn__icon,
 .ui-btn--sm ::v-deep svg {
   width: 20px;
@@ -70,6 +87,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--md .ui-btn__icon,
 .ui-btn--md ::v-deep svg {
   width: 20px;
@@ -84,6 +102,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--lg .ui-btn__icon,
 .ui-btn--lg ::v-deep svg {
   width: 20px;
@@ -98,6 +117,7 @@
   line-height: var(--paragraph-regular-line-height);
   letter-spacing: var(--paragraph-regular-letter-spacing);
 }
+
 .ui-btn--xl .ui-btn__icon,
 .ui-btn--xl ::v-deep svg {
   width: 20px;
@@ -112,9 +132,15 @@
 .ui-btn--round-default {
   border-radius: var(--radius-10);
 }
-.ui-btn--xs.ui-btn--round-default {
+
+.ui-btn--mini.ui-btn--round-default {
   border-radius: var(--rounded-lg);
 }
+
+.ui-btn--xs.ui-btn--round-default {
+  border-radius: var(--radius);
+}
+
 .ui-btn--round-round {
   border-radius: var(--rounded-full);
 }
@@ -128,6 +154,7 @@
   background: var(--primary-brand-bg);
   color: var(--inverse-fg);
 }
+
 .ui-btn--primary:hover,
 .ui-btn--primary:active {
   background: var(--primary-brand-hover);
@@ -138,6 +165,7 @@
   background: var(--button-black);
   color: var(--button-black-fg);
 }
+
 .ui-btn--neutral:hover,
 .ui-btn--neutral:active {
   background: var(--button-black-hover);
@@ -148,6 +176,7 @@
   background: var(--secondary-bg);
   color: var(--secondary-fg);
 }
+
 .ui-btn--secondary:hover,
 .ui-btn--secondary:active {
   background: var(--secondary-hover);
@@ -160,6 +189,7 @@
   border: 1px solid var(--border-primary);
   box-shadow: var(--shadow-xs);
 }
+
 .ui-btn--outline:hover,
 .ui-btn--outline:active {
   background: var(--outline-hover);
@@ -171,6 +201,7 @@
   background: var(--ghost);
   color: var(--primary-fg);
 }
+
 .ui-btn--ghost:hover,
 .ui-btn--ghost:active {
   background: var(--ghost-hover);
@@ -181,6 +212,7 @@
   background: var(--destructive);
   color: var(--destructive-inverse-fg);
 }
+
 .ui-btn--destructive:hover,
 .ui-btn--destructive:active {
   background: var(--destructive-hover);
@@ -190,7 +222,10 @@
 .ui-btn--link {
   background: var(--ghost);
   color: var(--primary-brand-fg);
+  height: fit-content;
+  padding: 0;
 }
+
 .ui-btn--link:hover,
 .ui-btn--link:active {
   color: var(--primary-brand-hover);
@@ -202,19 +237,24 @@
 .ui-btn:focus {
   outline: none;
 }
+
 .ui-btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px var(--focus-ring);
 }
+
 .ui-btn--secondary:focus-visible {
   background: var(--secondary-hover);
 }
+
 .ui-btn--outline:focus-visible {
   border-color: var(--border-focus);
 }
+
 .ui-btn--destructive:focus-visible {
   box-shadow: 0 0 0 3px var(--focus-ring-error);
 }
+
 /* ============================================================
    Disabled
    ============================================================ */
@@ -234,22 +274,31 @@
   gap: 0;
 }
 
-.ui-btn--icon-only.ui-btn--xs {
+.ui-btn--icon-only.ui-btn--mini {
   width: 24px;
   padding: var(--spacing-3xs);
 }
+
+.ui-btn--icon-only.ui-btn--xs {
+  width: 28px;
+  padding: var(--spacing-6);
+}
+
 .ui-btn--icon-only.ui-btn--sm {
   width: 32px;
   padding: var(--spacing-6);
 }
+
 .ui-btn--icon-only.ui-btn--md {
   width: 36px;
   padding: var(--spacing-xs);
 }
+
 .ui-btn--icon-only.ui-btn--lg {
   width: 40px;
   padding: var(--spacing-10);
 }
+
 .ui-btn--icon-only.ui-btn--xl {
   width: 48px;
   padding: var(--spacing-sm);

package/src/components/dialog/Dialog.vue

@@ -33,35 +33,35 @@
                 </slot>
 
                 <div class="ui-dialog-header__actions">
-                  <button
+                  <Button
                     v-if="minimizable"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
                     :aria-label="minimized ? 'Restore' : 'Minimize'"
+                    size="sm"
+                    variant="ghost"
                     @click="toggleMinimize"
                   >
-                    <WkiMinus v-if="!minimized" />
-                    <WkiUnfoldVertical v-else />
-                  </button>
-                  <button
+                    <template #icon>
+                      <WkiMinus v-if="!minimized" />
+                      <WkiUnfoldVertical v-else />
+                    </template>
+                  </Button>
+                  <Button
                     v-if="fullscreen"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
                     :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
+                    size="sm"
+                    variant="ghost"
                     @click="toggleFullscreen"
                   >
-                    <WkiExpand v-if="!isFullscreen" />
-                    <WkiShrink v-else />
-                  </button>
-                  <button
-                    v-if="closable"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
-                    aria-label="Close"
-                    @click="handleCancel"
-                  >
-                    <WkiX />
-                  </button>
+                    <template #icon>
+                      <WkiExpand v-if="!isFullscreen" />
+                      <WkiShrink v-else />
+                    </template>
+                  </Button>
+                  <Button v-if="closable" aria-label="Close" size="sm" variant="ghost" @click="handleCancel">
+                    <template #icon>
+                      <WkiX />
+                    </template>
+                  </Button>
                 </div>
               </div>
             </div>

package/src/components/dialog/dialog.css

@@ -64,7 +64,7 @@
   border-radius: var(--rounded-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
-  max-height: 100%; /* Allow internal scrolling if content is taller than wrapper */
+  max-height: 100%;
 }
 
 .ui-dialog-content {
@@ -157,40 +157,6 @@
   flex-shrink: 0;
 }
 
-.ui-dialog-header__icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 32px;
-  min-height: 32px;
-  padding: var(--spacing-6);
-  margin: 0;
-  background: var(--ghost);
-  color: var(--primary-fg);
-  border: 0;
-  border-radius: var(--rounded-xl);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.ui-dialog-header__icon-btn svg {
-  display: block;
-  width: 20px;
-  height: 20px;
-}
-
-.ui-dialog-header__icon-btn:hover {
-  background: var(--ghost-hover);
-}
-
-.ui-dialog-header__icon-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus-ring);
-}
-
 /* ── body ─────────────────────────────────────────────────────────────── */
 .ui-dialog-body {
   padding: var(--spacing-md);
@@ -238,6 +204,7 @@
 .ui-dialog-fade-leave-active {
   transition: opacity 0.2s ease;
 }
+
 .ui-dialog-fade-enter,
 .ui-dialog-fade-enter-from,
 .ui-dialog-fade-leave-to {
@@ -250,6 +217,7 @@
     opacity 0.2s ease,
     transform 0.2s ease;
 }
+
 .ui-dialog-zoom-enter,
 .ui-dialog-zoom-enter-from,
 .ui-dialog-zoom-leave-to {

package/src/components/input/input.css

@@ -51,7 +51,7 @@
   border-radius: var(--rounded-xl);
 }
 .ui-input--size-xs.ui-input--round-default {
-  border-radius: var(--rounded-lg);
+  border-radius: var(--radius);
 }
 .ui-input--round-round {
   border-radius: var(--rounded-full);

package/src/icons/BaseIcon.vue

@@ -44,21 +44,4 @@ export default {
 }
 </script>
 
-<style>
-.wki-base-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  vertical-align: middle;
-  line-height: 0;
-}
-
-.wki-base-icon svg {
-  width: var(--wki-icon-size);
-  height: var(--wki-icon-size);
-  color: var(--wki-icon-color);
-  stroke-width: var(--wki-icon-stroke-width);
-  fill: var(--wki-icon-fill);
-}
-</style>
+<style src="../styles/icons.css"></style>

package/src/styles/icons.css

@@ -0,0 +1,16 @@
+.wki-base-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.wki-base-icon svg {
+  width: var(--wki-icon-size);
+  height: var(--wki-icon-size);
+  color: var(--wki-icon-color);
+  stroke-width: var(--wki-icon-stroke-width);
+  fill: var(--wki-icon-fill);
+}