@netlify/spark-ui 1.13.1 → 1.13.3

package/dist/assets/Popover.css

@@ -1 +1 @@
-.n-popover-container{position:relative;display:inline-block;font-size:var(--font-size-text-xs)}.n-popover-trigger{background-color:transparent;border:none;padding:0;font:inherit;color:var(--color-text-weak);cursor:pointer}.n-popover{position:absolute;background-color:var(--color-bg-2);color:var(--color-text);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:10}.n-popover:after{content:"";position:absolute;border-style:solid}.n-popover-container:focus-within .n-popover,.n-popover-container:hover .n-popover{opacity:1;pointer-events:auto}.n-popover-container:focus-within .n-popover-trigger,.n-popover-container:hover .n-popover-trigger{box-shadow:0 1px 0 0 var(--neutral-300);border-radius:0}.n-popover-top .n-popover{bottom:145%;left:50%;transform:translate(-50%);width:260px;box-shadow:var(--shadow-light)}.n-popover-top .n-popover:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--color-bg-2) transparent transparent transparent}.n-popover-bottom .n-popover{top:145%;left:50%;transform:translate(-50%)}.n-popover-bottom .n-popover:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--color-bg-2) transparent}.n-popover-left .n-popover{right:125%;top:50%;transform:translateY(-50%)}.n-popover-left .n-popover:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--color-bg-2)}.n-popover-right .n-popover{left:125%;top:50%;transform:translateY(-50%)}.n-popover-right .n-popover:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--color-bg-2) transparent transparent}
+.n-popover-container{position:relative;display:inline-block;font-size:var(--font-size-text-xs)}.n-popover-trigger{background-color:transparent;border:none;padding:0;font:inherit;color:var(--color-text-weak);cursor:pointer}.n-popover{position:absolute;background-color:var(--color-bg-2);color:var(--color-text);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-s);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:10}.n-popover:after{content:"";position:absolute;border-style:solid}.n-popover-container:focus-within .n-popover,.n-popover-container:hover .n-popover{opacity:1;pointer-events:auto}.n-popover-container:focus-within .n-popover-trigger,.n-popover-container:hover .n-popover-trigger{box-shadow:0 1px 0 0 var(--neutral-300);border-radius:0}.n-popover-top .n-popover{bottom:145%;left:50%;transform:translate(-50%);width:255px;box-shadow:var(--shadow-light)}.n-popover-top .n-popover:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--color-bg-2) transparent transparent transparent}.n-popover-bottom .n-popover{top:145%;left:50%;transform:translate(-50%)}.n-popover-bottom .n-popover:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--color-bg-2) transparent}.n-popover-left .n-popover{right:125%;top:50%;transform:translateY(-50%)}.n-popover-left .n-popover:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--color-bg-2)}.n-popover-right .n-popover{left:125%;top:50%;transform:translateY(-50%)}.n-popover-right .n-popover:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--color-bg-2) transparent transparent}

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export { pluralize } from './pluralize';
+export { kebabCase } from './kebab';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/ActionArrow.astro

@@ -0,0 +1,42 @@
+<div class="n-action-arrow">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
+    <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564" clip-path="url(#a)">
+      <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
+      <path d="M9.88 9.381V4.093H4.59"></path>
+    </g>
+  </svg>
+</div>
+
+<style>
+  .n-action-arrow {
+    display: inline-flex;
+    overflow: hidden;
+
+    svg {
+      color: var(--color-icon);
+      transition: translate 0.1s ease-out;
+    }
+  }
+
+  @media (any-hover: hover) {
+    :global(
+      :is(.n-card-clickable, .n-action-link):where(:hover, :focus-visible) .n-action-arrow svg
+    ) {
+      --_offset: 100%;
+      animation: n-action-link-hover 350ms cubic-bezier(0.85, 0, 0.15, 1) forwards;
+    }
+
+    @keyframes n-action-link-hover {
+      0%,
+      100% {
+        translate: 0 0;
+      }
+      30% {
+        translate: calc(var(--_offset) * 2) calc(var(--_offset) * -2);
+      }
+      31% {
+        translate: calc(var(--_offset) * -1) var(--_offset);
+      }
+    }
+  }
+</style>

package/packages/components/ActionLink.astro

@@ -1,4 +1,6 @@
 ---
+import ActionArrow from './ActionArrow.astro';
+
 interface Props {
   id?: string;
   href: string;
@@ -10,19 +12,14 @@ const { id, href, text, class: className, ...rest } = Astro.props;
 ---
 
 <a id={id} class:list={['n-action-link', className]} href={href} {...rest}>
-  <span>{text ? text : <slot />}</span><div class="n-action-link-icon">
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
-      <g stroke="currentColor" stroke-linecap="square" stroke-width="1.564" clip-path="url(#a)">
-        <path stroke-linejoin="round" d="M3.417 10.556 9.4 4.572"></path>
-        <path d="M9.88 9.381V4.093H4.59"></path>
-      </g>
-    </svg>
-  </div>
+  <span>{text ? text : <slot />}</span><ActionArrow />
 </a>
 
 <style>
   .n-action-link {
-    display: inline-block;
+    display: inline-flex;
+    gap: var(--space-3xs);
+    align-items: center;
     font-weight: var(--font-weight-medium);
     font-size: var(--font-size-text-md);
     text-wrap: pretty; /** Prevents orphan icon */
@@ -35,35 +32,4 @@ const { id, href, text, class: className, ...rest } = Astro.props;
       text-underline-offset: 0.1em;
     }
   }
-
-  .n-action-link-icon {
-    display: inline-flex;
-    overflow: hidden;
-    margin-inline-start: 0.1em;
-
-    svg {
-      color: var(--color-icon);
-      transition: translate 0.1s ease-out;
-    }
-  }
-
-  @media (any-hover: hover) {
-    .n-action-link:where(:hover, :focus-visible) .n-action-link-icon svg {
-      --_offset: 100%;
-      animation: n-action-link-hover 350ms cubic-bezier(0.85, 0, 0.15, 1) forwards;
-    }
-
-    @keyframes n-action-link-hover {
-      0%,
-      100% {
-        translate: 0 0;
-      }
-      30% {
-        translate: calc(var(--_offset) * 2) calc(var(--_offset) * -2);
-      }
-      31% {
-        translate: calc(var(--_offset) * -1) var(--_offset);
-      }
-    }
-  }
 </style>

package/packages/components/Card.astro

@@ -1,4 +1,5 @@
 ---
+import ActionArrow from './ActionArrow.astro';
 import ActionLink from './ActionLink.astro';
 import Eyebrow from './Eyebrow.astro';
 
@@ -25,9 +26,19 @@ const {
   class: className,
   ...rest
 } = Astro.props;
+
+const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.href;
 ---
 
-<Element class:list={['n-card n-flow', isCardClickable && 'n-card-clickable', className]} {...rest}>
+<Element
+  class:list={[
+    'n-card n-flow',
+    isCardClickable && 'n-card-clickable',
+    isAnchorHeadline && 'n-card-anchor-heaadline',
+    className,
+  ]}
+  {...rest}
+>
   {
     Astro.slots.has('icon') && (
       <div class="n-card-icon">
@@ -43,16 +54,25 @@ const {
     )
   }
   {eyebrow && <Eyebrow class="n-card-eyebrow">{eyebrow}</Eyebrow>}
-  {headline && <div class="n-card-headline" set:html={headline} />}
+  {
+    isAnchorHeadline ? (
+      <a class="n-card-link n-card-link-headline" href={link?.href} id={link.id}>
+        <div class="n-card-headline" set:html={headline} />
+      </a>
+    ) : (
+      <div class="n-card-headline" set:html={headline} />
+    )
+  }
   {paragraph && <div class="n-card-paragraph" set:html={paragraph} />}
   <slot />
   {
-    link && (
+    link && link.text && (
       <ActionLink class="n-card-link" id={link.id} href={link.href}>
         {link.text}
       </ActionLink>
     )
   }
+  {isAnchorHeadline && <ActionArrow />}
 </Element>
 
 <style>
@@ -72,6 +92,10 @@ const {
     --n-flow-space: var(--space-s);
   }
 
+  .n-card-link:has(> .n-card-headline) {
+    text-decoration: none;
+  }
+
   .n-card-headline {
     font-size: var(--font-size-display-sm);
     font-family: var(--font-family-display);
@@ -80,6 +104,29 @@ const {
     color: var(--heading-text-color);
   }
 
+  .n-card-headline:has(+ .n-action-link) {
+    margin-block-end: auto;
+  }
+
+  .n-card-link-headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-s);
+    width: 100%;
+  }
+
+  .n-card-link-headline .n-card-headline {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .n-card :global(.n-action-arrow) {
+    flex: 0 0 auto;
+    align-self: center;
+    margin-inline-start: auto;
+  }
+
   .n-card-paragraph {
     line-height: var(--line-height-text);
   }
@@ -119,4 +166,14 @@ const {
       inset: 0;
     }
   }
+
+  /* Focus for Anchor Headline */
+  .n-card-anchor-heaadline:focus-within {
+    box-shadow: 0 0 0 3px var(--color-focus-ring, Highlight);
+    border-radius: var(--radius-s, 0.25rem);
+  }
+
+  .n-card-anchor-heaadline a:focus {
+    outline: none;
+  }
 </style>

package/packages/components/preact/Popover/Popover.css

@@ -47,7 +47,7 @@
   bottom: 145%;
   left: 50%;
   transform: translateX(-50%);
-  width: 260px;
+  width: 255px;
   box-shadow: var(--shadow-light);
 }
 

package/packages/utils/index.ts

@@ -1 +1,2 @@
 export { pluralize } from './pluralize';
+export { kebabCase } from './kebab';