@purestack/ts-components 1.1.7 → 1.1.9

package/src/standard/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import { tryResolveTsSsgContext } from '@purestack/ts-common'
+import { tryResolvePageContext } from '@purestack/ts-common'
 import type { SemanticTone } from '@purestack/ts-style'
 import {
   type ComponentHead,
@@ -27,6 +27,7 @@ export class Tabs {
   group: string = defaultGroup
   ariaLabel?: RefOrValue<string>
   selectedTab?: RefOrValue<string>
+  mobileSelect?: RefOrValue<boolean>
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
   variantMode?: RefOrValue<ComponentVariantMode>
@@ -48,7 +49,7 @@ export interface TabPane {
   tabClasses?: ComputedRef<string>
 }
 
-const tabsTemplate = html`<section class="tabs" :class="classes">
+const tabsTemplate = html`<section class="tabs" :class="classes" :data-mobile-select="mobileSelect">
   <slot name="header"></slot>
   <div class="tabs__list" role="tablist" :aria-label="ariaLabel || 'Tabs'">
     <slot></slot>
@@ -96,6 +97,7 @@ function defineTabsComponent() {
       'ariaLabel',
       'group',
       'selectedTab',
+      'mobileSelect',
       'tone',
       'variant',
       'variantMode',
@@ -189,5 +191,5 @@ function resolveTabPane(head: ComponentHead<TabPane>): TabPane {
 }
 
 function markTabsRuntimeEmbed(head: ComponentHead<Tabs>) {
-  tryResolveTsSsgContext(head)?.recordRuntimeEmbed('tabs', 'head')
+  tryResolvePageContext(head)?.recordRuntimeEmbed('tabs', 'head')
 }

package/src/standard/tabs/tabsStyle.ts

@@ -215,17 +215,21 @@ function registerTabsPanelStyles(theme: ThemeMode) {
 }
 
 function registerTabsResponsiveStyles(theme: ThemeMode) {
-  styleBuilder.select('.tabs--enhanced .tabs__tabs-row', theme).display('flex')
+  styleBuilder
+    .select('.tabs--enhanced > .tabs__tabs-row', theme)
+    .display('flex')
 
   styleBuilder
-    .select('.tabs--compact .tabs__select-wrap', theme)
+    .select('.tabs--compact > .tabs__select-wrap', theme)
     .display('block')
 
-  styleBuilder.select('.tabs--enhanced .tabs__tab', theme).display('none')
+  styleBuilder
+    .select('.tabs--enhanced > .tabs__list > .tabs__item > .tabs__tab', theme)
+    .display('none')
 
-  styleBuilder.select('.tabs--compact .tabs__tabs-row', theme).display('none')
+  styleBuilder.select('.tabs--compact > .tabs__tabs-row', theme).display('none')
 
   styleBuilder
-    .select('.tabs--compact .tabs__list', theme)
+    .select('.tabs--compact > .tabs__list', theme)
     .gridTemplateColumns('1fr')
 }

package/src/standard/topBar/topBar.ts

@@ -1,6 +1,6 @@
-import type { SiteLogoConfig, TsSsgContext } from '@purestack/ts-common'
+import type { PageContext, SiteLogoConfig } from '@purestack/ts-common'
 
-import { resolveTsSsgContext } from '@purestack/ts-common'
+import { resolvePageContext } from '@purestack/ts-common'
 import type { SemanticTone } from '@purestack/ts-style'
 import {
   type ComputedRef,
@@ -35,7 +35,7 @@ export interface TopBar {
 const DEFAULT_TOP_BAR_VARIANT: ComponentVariant = 'surfaceAlt'
 const DEFAULT_TOP_BAR_VARIANT_MODE: ComponentVariantMode = 'stateless'
 
-function resolveTopBar(context: TsSsgContext, props: TopBar): TopBar {
+function resolveTopBar(context: PageContext, props: TopBar): TopBar {
   return {
     ...props,
     siteLogo: context.site.logo,
@@ -106,7 +106,7 @@ function defineTopBarComponent() {
       'signInEnabled',
       'search',
     ],
-    context: (head) => resolveTopBar(resolveTsSsgContext(head), head.props),
+    context: (head) => resolveTopBar(resolvePageContext(head), head.props),
   })
 }