@300codes/design-system 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "type": "module",
   "files": [
     "src/components",

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -29,10 +29,11 @@ const emit = defineEmits<{
       'relative inline-flex',
     ]"
   >
-    <div :class="['baseTooltip__body', 'flex items-center']">
+    <div :class="['baseTooltip__body', 'flex items-start']">
       <div class="baseTooltip__text">
         <slot />
       </div>
+
       <button
         v-if="closeSize"
         :class="[
@@ -40,7 +41,7 @@ const emit = defineEmits<{
           'bg-transparent border-0 p-0 cursor-pointer inline-flex items-center justify-center shrink-0',
         ]"
         type="button"
-        aria-label="Close"
+        aria-label="Zamknij"
         @click="emit('close')"
       >
         <BaseIcon
@@ -49,6 +50,7 @@ const emit = defineEmits<{
         />
       </button>
     </div>
+
     <span
       aria-hidden="true"
       class="baseTooltip__arrow absolute w-0 h-0"
@@ -67,7 +69,7 @@ const emit = defineEmits<{
   color: var(--baseTooltip-fg, #ffffff);
   border-radius: var(--baseTooltip-radius, 0.5rem);
   max-width: var(--baseTooltip-max-w, 12.25rem);
-  padding: var(--baseTooltip-py, 1rem) var(--baseTooltip-px, 1rem);
+  padding: var(--baseTooltip-py, 0.75rem) var(--baseTooltip-px, 0.75rem);
   font-size: var(--baseTooltip-font-size, 0.75rem);
 }
 

package/src/components/TabsList/TabsList.vue

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<TabsListProps>(), {
 
 const model = defineModel<string>({ default: '' });
 
-const listRef = ref<HTMLUListElement | null>(null);
+const listRef = ref<HTMLDivElement | null>(null);
 const focusedIndex = ref<number>(-1);
 
 const activeIndex = computed<number>(() => {
@@ -71,50 +71,46 @@ watch(model, () => {
 </script>
 
 <template>
-  <ul
+  <div
     ref="listRef"
     role="tablist"
     :class="[
       'tabsList',
       `tabsList--${size}`,
       { 'tabsList--vertical': vertical },
-      'flex flex-nowrap items-center overflow-x-auto list-none m-0 p-0',
+      'flex flex-nowrap items-center overflow-x-auto m-0 p-0',
     ]"
     @focusout="handleFocusOut"
   >
-    <li
+    <button
       v-for="(item, index) in items"
       :key="item.value"
-      role="presentation"
-      class="shrink-0"
+      role="tab"
+      type="button"
+      :class="[
+        'tabsList__tab',
+        {
+          'tabsList__tab--active': model === item.value,
+          'tabsList__tab--disabled': item.disabled,
+        },
+        'shrink-0 inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
+      ]"
+      :tabindex="getTabIndex(index)"
+      :aria-selected="model === item.value"
+      :disabled="item.disabled"
+      @click="model = item.value"
+      @keydown="handleKeydown($event, index)"
     >
-      <button
-        role="tab"
-        :class="[
-          'tabsList__tab',
-          {
-            'tabsList__tab--active': model === item.value,
-            'tabsList__tab--disabled': item.disabled,
-          },
-          'inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
-        ]"
-        :tabindex="getTabIndex(index)"
-        :aria-selected="model === item.value"
-        :disabled="item.disabled"
-        @click="model = item.value"
-        @keydown="handleKeydown($event, index)"
-      >
-        {{ item.label }}
-
-        <BaseIcon
-          v-if="item.icon"
-          :name="item.icon"
-          :icon-path="iconPath"
-          size="md"
-        />
-      </button>
-    </li>
-  </ul>
+      {{ item.label }}
+
+      <BaseIcon
+        v-if="item.icon"
+        :name="item.icon"
+        :icon-path="iconPath"
+        size="md"
+      />
+    </button>
+  </div>
 </template>
 
 <style scoped>
@@ -157,22 +153,14 @@ watch(model, () => {
   @apply cursor-not-allowed pointer-events-none opacity-50;
 }
 
-/* ── vertical (md breakpoint and up) ── */
-
 .tabsList--vertical {
   @apply md:flex-col;
 }
 
-.tabsList--vertical > li {
-  @apply md:w-full;
-}
-
 .tabsList--vertical .tabsList__tab {
   @apply md:w-full md:justify-between;
 }
 
-/* ── lg ── */
-
 .tabsList--lg {
   gap: var(--tabsList-lg-gap, 1rem);
 }

package/src/css/tokens.css

@@ -364,8 +364,8 @@
   --baseTooltip-fg:              theme(--color-white);
   --baseTooltip-radius:          theme(--radius-lg);    /* 8px */
   --baseTooltip-max-w:           12.25rem;              /* 196px */
-  --baseTooltip-px:              theme(--spacing-4);    /* 16px */
-  --baseTooltip-py:              theme(--spacing-4);    /* 16px */
+  --baseTooltip-px:              theme(--spacing-3);    /* 12px */
+  --baseTooltip-py:              theme(--spacing-3);    /* 12px */
   --baseTooltip-gap:             theme(--spacing-4);    /* 16px — text↔close */
   --baseTooltip-font-size:       theme(--text-xs);      /* md 12px */
   --baseTooltip-lg-font-size:    theme(--text-sm);      /* lg 14px */