@feugene/granularity 0.34.1 → 0.35.0

package/dist/chunks/{config-_QF0O1vq.js → config-CMNfZO7S.js}

@@ -5,8 +5,8 @@ import { defineGranularComponent } from "@feugene/unocss-preset-granular/contrac
 var tabSizes = {
 	xs: "h-7 px-2 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
 	sm: "h-8 px-2.5 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]",
-	md: "h-9 px-3 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
-	lg: "h-10 px-4 text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]"
+	md: "h-10 px-3 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]",
+	lg: "h-11 px-4 text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]"
 };
 /** Счётчик у вкладки: на ступень мельче подписи. */
 var tabBadgeSizes = {

package/dist/chunks/config-CMNfZO7S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-CMNfZO7S.js","names":[],"sources":["../../src/components/GrTabs/grTabsStyles.ts","../../src/components/GrTabs/safelist.ts","../../src/components/GrTabs/config.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrTabsSize = GrComponentSize\n\n/**\n * `pills` — вкладки-таблетки в общей обойме, `line` — классический ряд с\n * подчёркиванием активной. Имя `pills` общее с `GrSegmented`: у компонентов\n * одна роль, и вид с таким названием у них совпадает.\n */\nexport const GR_TABS_VARIANTS = ['pills', 'line'] as const\nexport type GrTabsVariant = typeof GR_TABS_VARIANTS[number]\n\nexport type GrTabsOrientation = 'horizontal' | 'vertical'\n\n/** Высота вкладки повторяет шкалу `GrButton`: вкладки часто стоят с ним в один ряд. */\nexport const tabSizes: Record<GrTabsSize, string> = {\n  xs: 'h-7 px-2 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  sm: 'h-8 px-2.5 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)]',\n  md: 'h-10 px-3 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]',\n  lg: 'h-11 px-4 text-[length:var(--gr-text-base)] leading-[var(--gr-leading-base)]',\n}\n\n/** Счётчик у вкладки: на ступень мельче подписи. */\nexport const tabBadgeSizes: Record<GrTabsSize, string> = {\n  xs: 'text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-2xs)] px-1 py-0.5',\n  sm: 'text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-2xs)] px-1.5 py-0.5',\n  md: 'text-[length:var(--gr-text-2xs)] leading-[var(--gr-leading-2xs)] px-1.5 py-0.5',\n  lg: 'text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] px-2 py-0.5',\n}\n\n/** Обойма вокруг вкладок: на мелких ступенях рамка съедала бы высоту. */\nexport const tablistSizes: Record<GrTabsSize, string> = {\n  xs: 'gap-0.5 p-0.5',\n  sm: 'gap-1 p-1',\n  md: 'gap-1 p-1',\n  lg: 'gap-1 p-1.5',\n}\n\n/** `line` живёт без обоймы, поэтому и без внутренних отступов. */\nexport const tablistLineSizes: Record<GrTabsSize, string> = {\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-2',\n  lg: 'gap-3',\n}\n\nexport const tablistBase = 'inline-flex max-w-full'\n\nexport const tablistVariants: Record<GrTabsVariant, string> = {\n  pills: 'rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-muted)]',\n  line: 'border-b border-[var(--gr-brd)]',\n}\n\n/**\n * Вертикальный `line` подчёркивает вкладку сбоку, а не снизу: линия должна идти\n * вдоль списка, иначе она отделяет вкладки друг от друга вместо ряда целиком.\n */\nexport const tablistVerticalVariants: Record<GrTabsVariant, string> = {\n  pills: '',\n  line: 'border-b-0 border-r border-[var(--gr-brd)]',\n}\n\n/**\n * Переполнение прокручивается, а не переносится строкой: перенос ломает ряд и\n * уводит вкладки под панель. Полоса прокрутки скрыта — ряд ведёт клавиатура и\n * автоскролл к активной вкладке.\n */\nexport const tablistScrollClass = 'overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'\n\n/** Вертикальный ряд — колонка; прокрутки ему не нужно: он растёт вниз. */\nexport const tablistColumnClass = 'flex-col'\n\nexport const tabBase = 'shrink-0 font-600 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\n// Цвет подчёркивания задаёт только состояние: `border-transparent` в базе имеет\n// ту же специфичность, что и цвет активной вкладки, и побеждал бы через раз —\n// по порядку правил в сгенерированном CSS, а не по порядку классов в атрибуте.\nexport const tabVariantBase: Record<GrTabsVariant, string> = {\n  pills: 'rounded-[var(--gr-radius-md)]',\n  line: 'rounded-[var(--gr-radius-md)] rounded-b-[var(--gr-radius-none)] border-b-2 -mb-px',\n}\n\nexport const tabStateClasses: Record<GrTabsVariant, { active: string, idle: string, disabled: string }> = {\n  pills: {\n    active: 'bg-[var(--gr-card)] text-[var(--gr-fg)] border border-[var(--gr-brd)]',\n    idle: 'text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-card)_70%,transparent)]',\n    disabled: 'cursor-not-allowed text-[var(--gr-disabled-fg)]',\n  },\n  line: {\n    active: 'border-[var(--gr-primary)] text-[var(--gr-fg)]',\n    idle: 'border-transparent text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:border-[var(--gr-brd)]',\n    disabled: 'border-transparent cursor-not-allowed text-[var(--gr-disabled-fg)]',\n  },\n}\n\nexport const tabIconClass = 'h-4 w-4 shrink-0'\n\nexport const tabContentClass = 'inline-flex items-center gap-2'\n\n/**\n * Крестик закрытия. Кнопкой он быть не может: `role=\"tab\"` объявляет потомков\n * презентационными, и вложенный интерактив теряется у скринридера (axe:\n * `nested-interactive`). Поэтому это `<span>`, а клик по нему разбирает\n * обработчик самой вкладки.\n *\n * Своего фокус-кольца у него нет по той же причине — в таб-порядке он не стоит,\n * с клавиатуры закрытие идёт по `Delete`/`Backspace`.\n */\nexport const tabCloseBase = 'inline-flex items-center justify-center shrink-0 rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)]'\n\nexport const tabCloseSizes: Record<GrTabsSize, string> = {\n  xs: 'h-4 w-4',\n  sm: 'h-4 w-4',\n  md: 'h-5 w-5',\n  lg: 'h-5 w-5',\n}\n\nexport const tabCloseIconSizes: Record<GrTabsSize, string> = {\n  xs: 'h-3 w-3',\n  sm: 'h-3 w-3',\n  md: 'h-4 w-4',\n  lg: 'h-4 w-4',\n}\n\n/** Пустой ряд держит высоту вкладки: иначе соседние блоки прыгают при закрытии последней. */\nexport const tabsEmptyBase = 'inline-flex items-center text-[var(--gr-muted-fg)]'\n\nexport const tabBadgeBase = 'rounded-[var(--gr-radius-full)] bg-[var(--gr-secondary)] text-[var(--gr-secondary-fg)]'\n\nexport function grTabsListClass(options: {\n  variant: GrTabsVariant\n  size: GrTabsSize\n  orientation: GrTabsOrientation\n}): string {\n  const vertical = options.orientation === 'vertical'\n\n  return [\n    tablistBase,\n    tablistVariants[options.variant],\n    vertical ? tablistVerticalVariants[options.variant] : '',\n    options.variant === 'pills' ? tablistSizes[options.size] : tablistLineSizes[options.size],\n    vertical ? tablistColumnClass : tablistScrollClass,\n  ].filter(Boolean).join(' ')\n}\n\nexport function grTabsTabClass(options: {\n  variant: GrTabsVariant\n  size: GrTabsSize\n  active: boolean\n  disabled: boolean\n}): string {\n  const state = tabStateClasses[options.variant]\n\n  return [\n    tabBase,\n    tabVariantBase[options.variant],\n    tabSizes[options.size],\n    options.disabled ? state.disabled : options.active ? state.active : state.idle,\n  ].join(' ')\n}\n\nexport function grTabsBadgeClass(size: GrTabsSize): string {\n  return [tabBadgeBase, tabBadgeSizes[size]].join(' ')\n}\n\nexport function grTabsCloseClass(size: GrTabsSize): string {\n  return [tabCloseBase, tabCloseSizes[size]].join(' ')\n}\n\nexport function grTabsEmptyClass(size: GrTabsSize): string {\n  return [tabsEmptyBase, tabSizes[size]].join(' ')\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  tabBadgeBase,\n  tabBadgeSizes,\n  tabBase,\n  tabCloseBase,\n  tabCloseIconSizes,\n  tabCloseSizes,\n  tabContentClass,\n  tabIconClass,\n  tablistBase,\n  tablistColumnClass,\n  tablistLineSizes,\n  tablistScrollClass,\n  tablistSizes,\n  tablistVariants,\n  tablistVerticalVariants,\n  tabsEmptyBase,\n  tabSizes,\n  tabStateClasses,\n  tabVariantBase,\n} from './grTabsStyles'\n\nexport const grTabsSafelist = [...new Set([\n  ...Object.values(tabSizes).flatMap(splitClassTokens),\n  ...Object.values(tabBadgeSizes).flatMap(splitClassTokens),\n  ...Object.values(tabCloseSizes).flatMap(splitClassTokens),\n  ...Object.values(tabCloseIconSizes).flatMap(splitClassTokens),\n  ...Object.values(tablistSizes).flatMap(splitClassTokens),\n  ...Object.values(tablistLineSizes).flatMap(splitClassTokens),\n  ...Object.values(tablistVariants).flatMap(splitClassTokens),\n  ...Object.values(tablistVerticalVariants).flatMap(splitClassTokens),\n  ...Object.values(tabVariantBase).flatMap(splitClassTokens),\n  ...Object.values(tabStateClasses).flatMap(state => [\n    ...splitClassTokens(state.active),\n    ...splitClassTokens(state.idle),\n    ...splitClassTokens(state.disabled),\n  ]),\n  ...splitClassTokens(tablistBase),\n  ...splitClassTokens(tablistScrollClass),\n  ...splitClassTokens(tablistColumnClass),\n  ...splitClassTokens(tabBase),\n  ...splitClassTokens(tabBadgeBase),\n  ...splitClassTokens(tabContentClass),\n  ...splitClassTokens(tabIconClass),\n  ...splitClassTokens(tabCloseBase),\n  ...splitClassTokens(tabsEmptyBase),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grTabsSafelist } from './safelist'\n\nexport const grTabsConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrTabs',\n  safelist: grTabsSafelist,\n})\n"],"mappings":"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"}

package/dist/chunks/{generated-Bk-f6NsN.js → generated-BcfXQY4j.js}

@@ -3172,6 +3172,20 @@ var grComponentTokens = [
 		"default": "var(--gr-primary) / var(--gr-brd) / var(--gr-disabled-brd)",
 		"description": "Цвет рамки дорожки переключателя."
 	},
+	{
+		"owner": "GrTabs",
+		"name": "--gr-tabs-scroll-fade",
+		"kind": "hook",
+		"default": "1.5rem",
+		"description": "Ширина затухания у края горизонтального ряда вкладок — того края, за которым ряд продолжается. Тем же значением задан `scroll-padding` ряда, поэтому вкладка, подтянутая в видимую часть, не встаёт под затухание."
+	},
+	{
+		"owner": "GrTabs",
+		"name": "--gr-tabs-mask",
+		"kind": "css",
+		"default": "не задана, пока ряд влезает целиком",
+		"description": "Маска затухания. Задаётся собственным CSS компонента по `data-overflow`: у какого края есть продолжение, тот и гаснет. Вертикальный ряд не прокручивается, и маски у него нет."
+	},
 	{
 		"owner": "GrTimeline",
 		"name": "--gr-timeline-axis-width",
@@ -3246,8 +3260,8 @@ var grComponentTokens = [
 		"owner": "GrTimeline",
 		"name": "--gr-timeline-columns",
 		"kind": "css",
-		"default": "`auto 1fr`, а по раскладкам — с колонкой времени либо симметричная",
-		"description": "Сетка колонок ленты. Задаётся собственным CSS компонента по `layout`; строка события и заголовок группы делят её, чтобы ось у них совпадала."
+		"default": "`auto minmax(0, 1fr)`, а по раскладкам — с колонкой времени либо симметричная",
+		"description": "Сетка колонок ленты. Задаётся собственным CSS компонента по `layout`; строка события и заголовок группы делят её, чтобы ось у них совпадала. Гибкие треки объявлены `minmax(0, 1fr)`, а не `1fr`: голый `1fr` держит минимум по содержимому, и лента не сжималась бы в узкой колонке."
 	},
 	{
 		"owner": "GrToaster",