@grantcodes/ui 2.5.1 → 2.7.0

package/src/css/reset.css

@@ -0,0 +1,246 @@
+/* CSS reset — inspired by sanitize.css (https://csstools.github.io/sanitize.css/)
+   Inlined to avoid broken relative node_modules paths when installed externally. */
+
+/* Box sizing and background */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+/* Root defaults */
+:where(:root) {
+	font: var(--g-theme-typography-body);
+	cursor: default;
+	line-height: 1.5;
+	overflow-wrap: break-word;
+	-moz-tab-size: 4;
+	tab-size: 4;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-text-size-adjust: 100%;
+}
+
+:where(:root, body) {
+    padding: 0;
+   	margin: 0;
+}
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace,
+		"Menlo",
+		"Consolas",
+		"Roboto Mono",
+		"Ubuntu Monospace",
+		"Noto Mono",
+		"Oxygen Mono",
+		"Liberation Mono",
+		monospace,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
+}
+
+
+/* Grouping */
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin: 0;
+}
+
+:where(hr) {
+	color: inherit;
+	height: 0;
+}
+
+:where(nav) :where(ol, ul) {
+	list-style-type: none;
+	padding: 0;
+}
+
+/* Prevent VoiceOver from ignoring list semantics in Safari */
+:where(nav li)::before {
+	content: "\200B";
+	float: left;
+}
+
+:where(pre) {
+	font-size: 1em;
+	overflow: auto;
+}
+
+/* Text-level semantics */
+:where(abbr[title]) {
+	text-decoration: underline dotted;
+}
+
+:where(b, strong) {
+	font-weight: bolder;
+}
+
+:where(code, kbd, samp) {
+	font-size: 1em;
+}
+
+:where(small) {
+	font-size: 80%;
+}
+
+/* Embedded content */
+:where(audio, canvas, iframe, img, svg, video) {
+	vertical-align: middle;
+}
+
+:where(iframe) {
+	border-style: none;
+}
+
+:where(svg:not([fill])) {
+	fill: currentColor;
+}
+
+/* Tabular data */
+:where(table) {
+	border-collapse: collapse;
+	border-color: inherit;
+	text-indent: 0;
+}
+
+/* Forms — baseline normalisation */
+:where(button, input, select) {
+	margin: 0;
+}
+
+:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
+	-webkit-appearance: button;
+}
+
+:where(fieldset) {
+	border: 1px solid #a0a0a0;
+}
+
+:where(progress) {
+	vertical-align: baseline;
+}
+
+:where(textarea) {
+	margin: 0;
+	resize: vertical;
+}
+
+:where([type="search" i]) {
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+::-webkit-input-placeholder {
+	color: inherit;
+	opacity: 0.54;
+}
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button;
+	font: inherit;
+}
+
+/* Forms — typography and colour inheritance */
+:where(button, input, select, textarea) {
+	background-color: transparent;
+	border: 1px solid WindowFrame;
+	color: inherit;
+	font: inherit;
+	letter-spacing: inherit;
+	padding: 0.25em 0.375em;
+}
+
+:where([type="color" i], [type="range" i]) {
+	border-width: 0;
+	padding: 0;
+}
+
+/* Interactive */
+:where(details > summary:first-of-type) {
+	display: list-item;
+}
+
+/* Accessibility */
+:where([aria-busy="true" i]) {
+	cursor: progress;
+}
+
+:where([aria-controls]) {
+	cursor: pointer;
+}
+
+:where([aria-disabled="true" i], [disabled]) {
+	cursor: not-allowed;
+}
+
+:where([aria-hidden="false" i][hidden]) {
+	display: initial;
+}
+
+:where([aria-hidden="false" i][hidden]:not(:focus)) {
+	clip: rect(0, 0, 0, 0);
+	position: absolute;
+}
+
+/* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-delay: -1ms !important;
+		animation-duration: 1ms !important;
+		animation-iteration-count: 1 !important;
+		background-attachment: initial !important;
+		scroll-behavior: auto !important;
+		transition-delay: 0s !important;
+		transition-duration: 0s !important;
+	}
+}
+
+/* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
+:root {
+	color-scheme: light dark;
+	--grantcodes-ui-theme: "none";
+	background-color: var(--g-theme-color-background-default);
+	color: var(--g-theme-color-content-default);
+	fill: currentColor;
+}
+
+/* Allow transitioning auto */
+:root {
+	@supports (interpolate-size: allow-keywords) {
+		interpolate-size: allow-keywords;
+	}
+}
+
+::selection {
+	background-color: var(--g-theme-color-background-brand);
+}
+
+/* Default backdrop styles */
+::backdrop {
+	background-color: rgba(0, 0, 0, 0.4);
+	backdrop-filter: blur(6px);
+}

package/src/lib/styles/all.css

@@ -10,6 +10,7 @@
   @import "../../components/card/card.css";
   @import "../../components/code-preview/code-preview.css";
   @import "../../components/container/container.css";
+  @import "../../components/countdown/countdown.css";
   @import "../../components/cta/cta.css";
   @import "../../components/dialog/dialog.css";
   @import "../../components/dropdown/dropdown.css";
@@ -23,6 +24,7 @@
   @import "../../components/icon/icon.css";
   @import "../../components/loading/loading.css";
   @import "../../components/logo-cloud/logo-cloud.css";
+  @import "../../components/map/map.css";
   @import "../../components/media-text/media-text.css";
   @import "../../components/newsletter/newsletter.css";
   @import "../../components/notice/notice.css";

package/src/main.js

@@ -5,6 +5,7 @@ export * from "./components/button-group/index.js";
 export * from "./components/card/index.js";
 export * from "./components/code-preview/index.js";
 export * from "./components/container/index.js";
+export * from "./components/countdown/index.js";
 export * from "./components/cta/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/dropzone/index.js";
@@ -15,6 +16,7 @@ export * from "./components/hero/index.js";
 export * from "./components/icon/index.js";
 export * from "./components/loading/index.js";
 export * from "./components/logo-cloud/index.js";
+export * from "./components/map/index.js";
 export * from "./components/media-text/index.js";
 export * from "./components/newsletter/index.js";
 export * from "./components/notice/index.js";

package/src/pages/blog-post.stories.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../components/app-bar/app-bar.js";
+import "../components/app-bar/nav-link.js";
 import "../components/button/button.js";
 import "../components/breadcrumb/breadcrumb.js";
 import "../components/container/container.js";
@@ -93,10 +94,10 @@ export const Default = {
         Flowbase
       </a>
       <div slot="nav" style="display: flex; gap: 0.5rem;">
-        <a href="/">Home</a>
-        <a href="/features">Features</a>
-        <a href="/blog">Blog</a>
-        <a href="/pricing">Pricing</a>
+        <grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/blog">Blog</a></grantcodes-nav-link>
+        <grantcodes-nav-link><a href="/pricing">Pricing</a></grantcodes-nav-link>
       </div>
       <div slot="actions" style="display: flex; gap: 0.5rem;">
         <grantcodes-button variant="ghost">Sign in</grantcodes-button>
@@ -287,7 +288,7 @@ export const Default = {
 
     <!-- Related posts -->
     <div
-      style="background: var(--g-theme-color-background-subtle); padding-block: var(--g-theme-spacing-2xl);"
+      style="padding-block: var(--g-theme-spacing-2xl);"
     >
       <grantcodes-container>
         <h2
@@ -352,20 +353,7 @@ export const Default = {
       </grantcodes-container>
     </div>
 
-    <grantcodes-cta
-      eyebrow="Ready to try it?"
-      title="See how Flowbase keeps your team in flow"
-      text="Join thousands of teams who've replaced their meeting-heavy workflows with a calmer, more productive way of working."
-      primary-action=${JSON.stringify({
-				label: "Start for free",
-				href: "/signup",
-			})}
-      secondary-action=${JSON.stringify({
-				label: "See all features",
-				href: "/features",
-			})}
-      align="center"
-    ></grantcodes-cta>
+
 
     <grantcodes-footer columns="3">
       ${footerContent}

package/src/react.js

@@ -1,5 +1,6 @@
 export { Accordion } from "./components/accordion/accordion.react.js"
 export { AppBar } from "./components/app-bar/app-bar.react.js"
+export { NavLink } from "./components/app-bar/nav-link.react.js"
 export { Avatar } from "./components/avatar/avatar.react.js"
 export { Badge } from "./components/badge/badge.react.js"
 export { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/breadcrumb.react.js"
@@ -8,6 +9,7 @@ export { ButtonGroup } from "./components/button-group/button-group.react.js"
 export { Card } from "./components/card/card.react.js"
 export { CodePreview } from "./components/code-preview/code-preview.react.js"
 export { Container } from "./components/container/container.react.js"
+export { Countdown } from "./components/countdown/countdown.react.js"
 export { Cta } from "./components/cta/cta.react.js"
 export { Dialog } from "./components/dialog/dialog.react.js"
 export { Dropdown, DropdownItem } from "./components/dropdown/dropdown.react.js"
@@ -21,6 +23,7 @@ export { Hero } from "./components/hero/hero.react.js"
 export { Icon } from "./components/icon/icon.react.js"
 export { Loading } from "./components/loading/loading.react.js"
 export { LogoCloud } from "./components/logo-cloud/logo-cloud.react.js"
+export { MapEmbed } from "./components/map/map.react.js"
 export { MediaText } from "./components/media-text/media-text.react.js"
 export { Newsletter } from "./components/newsletter/newsletter.react.js"
 export { Notice } from "./components/notice/notice.react.js"

package/src/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Ambient module declarations for @grantcodes/ui.
+ *
+ * Usage: Add to your tsconfig.json:
+ *   { "compilerOptions": { "types": ["@grantcodes/ui"] } }
+ *
+ * Or reference directly:
+ *   /// <reference types="@grantcodes/ui" />
+ */
+
+// Component deep imports
+declare module "@grantcodes/ui/components/*";
+
+// Style imports
+declare module "@grantcodes/ui/styles/*";
+
+// Font imports
+declare module "@grantcodes/ui/fonts/*";