@streamscloud/kit 0.46.0 → 0.48.0

package/dist/ui/tabs/tab.svelte

@@ -1,26 +1,11 @@
-<script lang="ts" generics="T">import { IconSlot } from '../icon';
-import { TabsLocalization } from './tabs-localization';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-const { tab, variant, size, active, on } = $props();
-const localization = new TabsLocalization();
-const closable = $derived(!!on?.close && !tab.disabled);
+<script lang="ts" generics="T">const { tab, variant, size, active, on } = $props();
 const handleClick = () => {
     if (tab.disabled || active) {
         return;
     }
     on?.select?.(tab.value);
 };
-const handleClose = (event) => {
-    event.stopPropagation();
-    on?.close?.(tab.value);
-};
-const handleCloseKeydown = (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        event.stopPropagation();
-        on?.close?.(tab.value);
-    }
-};
+export {};
 </script>
 
 <button
@@ -30,25 +15,19 @@ const handleCloseKeydown = (event) => {
   class:tab--hoverable={!active && !tab.disabled}
   class:tab--default-active={variant === 'default' && active}
   class:tab--pills-active={variant === 'pills' && active}
-  class:tab--document-active={variant === 'document' && active}
-  class:tab--document-hoverable={variant === 'document' && !active && !tab.disabled}
   role="tab"
   aria-selected={active}
   disabled={tab.disabled}
   onclick={handleClick}>
   <span class="tab__label">{tab.label}</span>
-  {#if closable}
-    <span class="tab__close" role="button" tabindex="0" aria-label={localization.close} onclick={handleClose} onkeydown={handleCloseKeydown}>
-      <IconSlot icon={IconDismiss} fallbacks={{ size: 'sm' }} />
-    </span>
-  {/if}
 </button>
 
 <style>.tab {
-  --_tab--height: var(--sc-kit--tabs--height, 2.25rem);
-  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--sc-kit--font-size--md));
-  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--sc-kit--font-weight--medium));
-  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, 0.875rem);
+  --_tab--height: var(--sc-kit--tabs--height, var(--_tab--size-height));
+  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--_tab--size-font-size));
+  --_tab--line-height: var(--_tab--size-line-height, var(--sc-kit--line-height--control--md));
+  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--_tab--size-font-weight));
+  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, var(--_tab--size-padding-inline));
   --_tab--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
   --_tab--color: var(--sc-kit--tabs--color, var(--sc-kit--color--text--secondary));
   --_tab--color-hover: var(--sc-kit--tabs--color--hover, var(--sc-kit--color--text--primary));
@@ -57,9 +36,6 @@ const handleCloseKeydown = (event) => {
   --_tab--accent: var(--sc-kit--tabs--accent, var(--sc-kit--color--accent));
   --_tab--pills-background-active: var(--sc-kit--tabs--pills--background--active, var(--sc-kit--color--bg--panel));
   --_tab--pills-shadow-active: var(--sc-kit--tabs--pills--shadow--active, var(--sc-kit--shadow--sm));
-  --_tab--document-background: var(--sc-kit--tabs--document--background, light-dark(#e5e7eb, #272727));
-  --_tab--document-background-active: var(--sc-kit--tabs--document--background--active, var(--sc-kit--color--bg--app));
-  --_tab--document-background-hover: var(--sc-kit--tabs--document--background--hover, var(--sc-kit--color--bg--hover));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -73,23 +49,25 @@ const handleCloseKeydown = (event) => {
   font-family: inherit;
   font-size: var(--_tab--font-size);
   font-weight: var(--_tab--font-weight);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_tab--line-height);
   cursor: pointer;
   white-space: nowrap;
   min-width: 0;
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .tab--sm {
-  --sc-kit--tabs--height: 1.75rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--regular);
-  --sc-kit--tabs--padding-inline: 0.625rem;
+  --_tab--size-height: 1.8125rem;
+  --_tab--size-font-size: var(--sc-kit--font-size--sm);
+  --_tab--size-line-height: var(--sc-kit--line-height--control--sm);
+  --_tab--size-font-weight: var(--sc-kit--font-weight--regular);
+  --_tab--size-padding-inline: 0.625rem;
 }
 .tab--md {
-  --sc-kit--tabs--height: 2.25rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--medium);
-  --sc-kit--tabs--padding-inline: 0.875rem;
+  --_tab--size-height: 2.25rem;
+  --_tab--size-font-size: var(--sc-kit--font-size--md);
+  --_tab--size-line-height: var(--sc-kit--line-height--control--md);
+  --_tab--size-font-weight: var(--sc-kit--font-weight--medium);
+  --_tab--size-padding-inline: 0.875rem;
 }
 .tab--hoverable:hover {
   color: var(--_tab--color-hover);
@@ -123,23 +101,6 @@ const handleCloseKeydown = (event) => {
   background: var(--_tab--pills-background-active);
   box-shadow: var(--_tab--pills-shadow-active);
 }
-.tab--document {
-  --_tab--color-active-default: var(--sc-kit--color--text--primary);
-  --_tab--height: 2rem;
-  --_tab--padding-inline: 0.75rem;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  min-width: 7rem;
-  background: var(--_tab--document-background);
-  border-radius: 0.25rem 0.5rem 0 0;
-}
-.tab--document-hoverable:hover {
-  background: var(--_tab--document-background-hover);
-}
-.tab--document-active {
-  color: var(--_tab--color-active);
-  background: var(--_tab--document-background-active);
-}
 .tab:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);
   outline-offset: 2px;
@@ -147,23 +108,4 @@ const handleCloseKeydown = (event) => {
 .tab__label {
   display: inline-block;
   max-width: 100%;
-}
-.tab__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-left: auto;
-  padding: 0.125rem;
-  color: var(--sc-kit--color--text--secondary);
-  border-radius: var(--sc-kit--radius--sm);
-  cursor: pointer;
-  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
-}
-.tab__close:hover {
-  color: var(--sc-kit--color--text--primary);
-}
-.tab__close:focus-visible {
-  outline: 2px solid var(--sc-kit--color--border--focus);
-  outline-offset: 2px;
 }</style>

package/dist/ui/tabs/tab.svelte.d.ts

@@ -7,7 +7,6 @@ declare function $$render<T>(): {
         active: boolean;
         on?: {
             select?: (value: T) => void;
-            close?: (value: T) => void;
         };
     };
     exports: {};

package/dist/ui/tabs/types.d.ts

@@ -1,4 +1,4 @@
-export type TabsVariant = 'default' | 'pills' | 'document';
+export type TabsVariant = 'default' | 'pills';
 export type TabsSize = 'sm' | 'md';
 export type Tab<TValue = unknown> = {
     value: TValue;

package/dist/ui/url-input/cmp.url-input.svelte

@@ -118,7 +118,6 @@ Plus every public CSS variable exposed by `<Input>`.
   background: var(--_ui--scheme-background);
   color: var(--_ui--scheme-color);
   border-inline-end: 1px solid var(--_ui--scheme-border-color);
-  line-height: var(--sc-kit--leading--tight);
   user-select: none;
   white-space: nowrap;
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);

package/dist/ui/website-input/cmp.website-input.svelte

@@ -64,7 +64,6 @@ Plus every public CSS variable exposed by `<Input>`.
   background: var(--_wi--prefix-background);
   color: var(--_wi--prefix-color);
   border-inline-end: 1px solid var(--_wi--prefix-border-color);
-  line-height: var(--sc-kit--leading--tight);
   user-select: none;
   white-space: nowrap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -163,6 +163,10 @@
       "types": "./dist/ui/divider/index.d.ts",
       "svelte": "./dist/ui/divider/index.js"
     },
+    "./ui/document-tabs": {
+      "types": "./dist/ui/document-tabs/index.d.ts",
+      "svelte": "./dist/ui/document-tabs/index.js"
+    },
     "./ui/drag-and-drop": {
       "types": "./dist/ui/drag-and-drop/index.d.ts",
       "svelte": "./dist/ui/drag-and-drop/index.js"

package/dist/ui/tabs/tabs-localization.d.ts

@@ -1,3 +0,0 @@
-export declare class TabsLocalization {
-    get close(): string;
-}

package/dist/ui/tabs/tabs-localization.js

@@ -1,12 +0,0 @@
-import { AppLocale } from '../../core/locale';
-const loc = {
-    close: {
-        en: 'Close tab',
-        no: 'Lukk fane'
-    }
-};
-export class TabsLocalization {
-    get close() {
-        return loc.close[AppLocale.current];
-    }
-}