@astronox/core 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/components/actions/CardAction/CardAction.astro

@@ -7,6 +7,7 @@ import Media from '../../../primitives/media/Media/Media.astro';
 
 type Props = Omit<HTMLAttributes<'button'>, 'type'> &
   Omit<HTMLAttributes<'a'>, 'href'> & {
+    collapse?: 'none' | 'icon';
     compactLabel?: string;
     disabled?: boolean;
     href?: string;
@@ -24,6 +25,8 @@ type Props = Omit<HTMLAttributes<'button'>, 'type'> &
 const {
   class: className,
   'data-tone': dataTone,
+  'aria-label': ariaLabel,
+  collapse = 'none',
   compactLabel,
   disabled = false,
   href,
@@ -44,6 +47,8 @@ const resolvedRel =
   rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
 const resolvedTone = tone ?? dataTone;
 const hasVisual = Boolean(Icon || media);
+const resolvedAriaLabel =
+  ariaLabel ?? (collapse === 'icon' && hasVisual ? label : undefined);
 const isLink = Boolean(href);
 const isDisabledLink = isLink && disabled;
 const Root = isLink ? (isDisabledLink ? 'span' : 'a') : 'button';
@@ -51,8 +56,10 @@ const Root = isLink ? (isDisabledLink ? 'span' : 'a') : 'button';
 
 <Root
   {...attrs}
+  aria-label={resolvedAriaLabel}
   aria-disabled={isDisabledLink ? 'true' : undefined}
   class:list={['card-action', className]}
+  data-card-action-collapse={hasVisual ? collapse : undefined}
   data-card-action-compact-label={compactLabel ? true : undefined}
   data-card-action-hover-tone={hoverTone}
   data-card-action-label-treatment={labelTreatment}

package/src/components/actions/CardAction/CardAction.css

@@ -7,6 +7,7 @@
   --card-action-icon-size: var(--nox-compact-media-responsive-size);
   --card-action-hover-seed: var(--nox-tone-seed);
 
+  position: relative;
   display: grid;
   min-width: 0;
   min-height: var(--card-action-size);
@@ -169,6 +170,31 @@
 }
 
 @media (width < 48rem) {
+  .card-action[data-card-action-collapse='icon'][data-has-visual] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-action[data-card-action-collapse='icon'][data-has-visual]
+    .card-action__visual {
+    grid-column: 1;
+    inline-size: 100%;
+    border-inline: 0;
+  }
+
+  .card-action[data-card-action-collapse='icon'][data-has-visual]
+    .card-action__label {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    min-height: 0;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   .card-action[data-card-action-compact-label] .card-action__label-full {
     display: none;
   }

package/src/components/actions/ThemeToggle/themeToggleController.ts

@@ -54,7 +54,11 @@ function updateToggles(theme: ColorTheme): void {
 }
 
 function applyTheme(theme: ColorTheme, persist: boolean): void {
-  document.documentElement.dataset.theme = theme;
+  const root = document.documentElement;
+  root.dataset.themeSwitching = 'true';
+  root.dataset.theme = theme;
+  void root.offsetWidth;
+  delete root.dataset.themeSwitching;
 
   if (persist) {
     try {

package/src/components/navigation/MobileNavigation.astro

@@ -51,6 +51,8 @@ const fallbackItems = [...leftItems, ...rightItems].flatMap((item) =>
 const resolvedMobileItems = mobileItems ?? fallbackItems;
 const resolvedHasUtilityActions =
   hasUtilityActions ?? Astro.slots.has('utility-actions');
+const utilityControlCount =
+  mobileUtilityItems.length + Number(resolvedHasUtilityActions);
 ---
 
 <div class="site-nav__mobile" data-mobile-navigation>
@@ -124,7 +126,10 @@ const resolvedHasUtilityActions =
       mobileFooterItems.length > 0 ? (
         <div class="site-nav__mobile-controls">
           {mobileUtilityItems.length > 0 || resolvedHasUtilityActions ? (
-            <ul class="site-nav__mobile-utility">
+            <ul
+              class="site-nav__mobile-utility"
+              style={`--mobile-navigation-control-count: ${utilityControlCount};`}
+            >
               {mobileUtilityItems.map((item) => (
                 <li>
                   <NavigationLink
@@ -147,7 +152,10 @@ const resolvedHasUtilityActions =
           ) : null}
 
           {mobileFooterItems.length > 0 ? (
-            <ul class="site-nav__mobile-footer">
+            <ul
+              class="site-nav__mobile-footer"
+              style={`--mobile-navigation-control-count: ${mobileFooterItems.length};`}
+            >
               {mobileFooterItems.map((item) => (
                 <li>
                   <NavigationLink

package/src/components/navigation/MobileNavigation.css

@@ -174,19 +174,14 @@
 .site-nav__mobile-utility,
 .site-nav__mobile-footer {
   display: grid;
+  grid-template-columns: repeat(
+    var(--mobile-navigation-control-count, 1),
+    minmax(0, 1fr)
+  );
   margin: 0;
   padding: 0;
-  list-style: none;
-}
-
-.site-nav__mobile-utility {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--nox-space-3);
-}
-
-.site-nav__mobile-footer {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--nox-space-3);
+  list-style: none;
 }
 
 .site-nav__mobile-utility-link,

package/src/components/seo/SeoHead.astro

@@ -94,10 +94,30 @@ const jsonLdNodes = [
     <meta
       name="theme-color"
       content={themeColor.color}
+      data-theme-color={themeColor.theme}
       media={themeColor.media}
     />
   ))
 }
+<script is:inline>
+  (() => {
+    const applyThemeColor = (theme) => {
+      if (theme !== 'light' && theme !== 'dark') return;
+
+      for (const meta of document.querySelectorAll(
+        'meta[name="theme-color"][data-theme-color]',
+      )) {
+        if (!(meta instanceof HTMLMetaElement)) continue;
+        meta.media = meta.dataset.themeColor === theme ? 'all' : 'not all';
+      }
+    };
+
+    applyThemeColor(document.documentElement.dataset.theme);
+    document.addEventListener('astronox:theme-change', (event) => {
+      applyThemeColor(event.detail?.theme);
+    });
+  })();
+</script>
 <meta name="application-name" content={site.identity.name} />
 <meta name="apple-mobile-web-app-title" content={site.identity.name} />
 {seo.description ? <meta name="description" content={seo.description} /> : null}

package/src/config/siteConfig.ts

@@ -1,4 +1,5 @@
 import type { PageMeta } from './pageMeta';
+import type { ColorTheme } from '../theme/contracts';
 
 export type SiteTextDirection = 'ltr' | 'rtl';
 
@@ -35,6 +36,7 @@ export type SiteIconConfig = {
 export type SiteThemeColor = {
   color: string;
   media?: string;
+  theme?: ColorTheme;
 };
 
 export type SiteSeoConfig = {

package/src/styles/interaction.css

@@ -1,3 +1,10 @@
+[data-theme-switching='true'],
+[data-theme-switching='true'] *,
+[data-theme-switching='true'] *::before,
+[data-theme-switching='true'] *::after {
+  transition: none !important;
+}
+
 [data-interaction-accent] {
   --nox-interaction-accent-hover-background: color-mix(
     in srgb,