nibbles-and-bites 0.1.2 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nibbles-and-bites",
   "description": "A composable and accessible component framework",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/AliciaBytes/nibbles-and-bites#readme",
   "type": "module",
   "exports": {
@@ -23,9 +23,11 @@
   ],
   "license": "(Apache-2.0 OR MIT)",
   "devDependencies": {
-    "astro": "^5.7.5"
+    "astro": "^5.7.5",
+    "solid-js": "^1.9.5"
   },
   "peerDependencies": {
-    "astro": "^5.7.0"
+    "astro": "^5.7.0",
+    "solid-js": "^1.9.5"
   }
 }

package/src/assets/lightbulb.svg

@@ -0,0 +1 @@
+<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 1)"><path d="m6.5 17.5h4"/><path d="m8.5 4c2.4852814 0 4.5 2.01471863 4.5 4.5 0 1.7663751-1.017722 3.2950485-2.4987786 4.031633l-.0012214.968367c0 1.1045695-.8954305 2-2 2s-2-.8954305-2-2l-.00021218-.9678653c-1.48160351-.7363918-2.49978782-2.2653584-2.49978782-4.0321347 0-2.48528137 2.01471863-4.5 4.5-4.5z"/><path d="m8.5 1.5v-1"/><path d="m13.5 3.5 1-1"/><path d="m2.5 3.5 1-1" transform="matrix(-1 0 0 1 6 0)"/><path d="m13.5 13.5 1-1" transform="matrix(1 0 0 -1 0 26)"/><path d="m2.5 13.5 1-1" transform="matrix(-1 0 0 -1 6 26)"/><path d="m1.5 7.5h-1"/><path d="m16.5 7.5h-1"/></g></svg>

package/src/assets/warning-hex.svg

@@ -0,0 +1 @@
+<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(-1 -1)"><path d="m14.517 3.5 4.983 5v6l-4.983 5h-6.017l-5-5v-6l5-5z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="m11.5 12.5v-5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="11.5" cy="15.5" fill="currentColor" r="1"/></g></svg>

package/src/assets/warning-triangle.svg

@@ -0,0 +1 @@
+<svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><path d="m9.5.5 9 16h-18z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="m9.5 10.5v-5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9.5" cy="13.5" fill="currentColor" r="1"/></g></svg>

package/src/components/astro/Danger.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import InfoSVG from "../../assets/warning-hex.svg";
+
+interface Props extends HTMLAttributes<"aside"> {
+  backgroundColor?: string;
+  color?: string;
+  highlightColor?: string;
+  title: string;
+}
+
+const {
+  backgroundColor,
+  color,
+  highlightColor = "var(--color-red)",
+  title = "Danger",
+} = Astro.props;
+---
+
+<aside>
+  <p>
+    <InfoSVG class="aside-icon" />
+    {title}
+  </p>
+  <div>
+    <slot />
+  </div>
+</aside>
+
+<style define:vars={{ color, highlightColor, backgroundColor }}>
+  @layer nb.component {
+    p {
+      display: inline-flex;
+      gap: 3px;
+      align-items: center;
+    }
+    .aside-icon {
+      height: 1.5em;
+      width: 1.5em;
+    }
+    aside {
+      color: var(--color);
+      background-color: var(
+        --backgroundColor,
+        oklch(from var(--highlightColor) calc(l * 0.33) c h)
+      );
+      border-left: 6px solid var(--highlightColor);
+      padding: 9px 0px;
+      padding-left: 18px;
+    }
+  }
+</style>

package/src/components/astro/Hint.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import InfoSVG from "../../assets/lightbulb.svg";
+
+interface Props extends HTMLAttributes<"aside"> {
+  backgroundColor?: string;
+  color?: string;
+  highlightColor?: string;
+  title: string;
+}
+
+const {
+  backgroundColor,
+  color,
+  highlightColor = "var(--color-lavender)",
+  title = "Hint",
+} = Astro.props;
+---
+
+<aside>
+  <p>
+    <InfoSVG class="aside-icon" />
+    {title}
+  </p>
+  <div>
+    <slot />
+  </div>
+</aside>
+
+<style define:vars={{ color, highlightColor, backgroundColor }}>
+  @layer nb.component {
+    p {
+      display: inline-flex;
+      gap: 3px;
+      align-items: center;
+    }
+    .aside-icon {
+      height: 1.5em;
+      width: 1.5em;
+    }
+    aside {
+      color: var(--color);
+      background-color: var(
+        --backgroundColor,
+        oklch(from var(--highlightColor) calc(l * 0.33) c h)
+      );
+      border-left: 6px solid var(--highlightColor);
+      padding: 9px 0px;
+      padding-left: 18px;
+    }
+  }
+</style>

package/src/components/astro/Information.astro

@@ -3,22 +3,24 @@ import type { HTMLAttributes } from "astro/types";
 import InfoSVG from "../../assets/info_circle.svg";
 
 interface Props extends HTMLAttributes<"aside"> {
+  backgroundColor?: string;
   color?: string;
   highlightColor?: string;
-  backgroundColor?: string;
+  title: string;
 }
 
 const {
+  backgroundColor,
   color,
   highlightColor = "var(--color-sky)",
-  backgroundColor,
+  title = "Information",
 } = Astro.props;
 ---
 
 <aside>
   <p>
     <InfoSVG class="aside-icon" />
-    Information
+    {title}
   </p>
   <div>
     <slot />

package/src/components/astro/InlineSpoiler.astro

@@ -0,0 +1,10 @@
+---
+import { InlineSpoiler as SolidInlineSpoiler } from "../solid/InlineSpoiler.tsx";
+const { content_note, ...props } = Astro.props;
+---
+
+<!-- htmlmin:ignore -->
+<SolidInlineSpoiler client:load {content_note} {...props}
+  ><slot /></SolidInlineSpoiler
+>
+<!-- htmlmin:ignore -->

package/src/components/astro/Navigation.astro

@@ -0,0 +1,34 @@
+---
+import {
+  default as NavigationLink,
+  Props as NavigationElement,
+} from "./NavigationLink.astro";
+
+interface Props {
+  navigation: Array<NavigationElement>;
+}
+
+const { navigation } = Astro.props;
+---
+
+<nav>
+  <ul role="list">
+    {
+      navigation.map((element) => (
+        <li>
+          <NavigationLink slug={element.slug} title={element.title} />
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  @layer nb.component {
+    ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 1fr));
+      margin: 0;
+    }
+  }
+</style>

package/src/components/astro/NavigationLink.astro

@@ -0,0 +1,30 @@
+---
+export interface Props {
+  slug: string;
+  title: string;
+}
+const { slug, title } = Astro.props;
+const url = Astro.url;
+const pathname = url.pathname;
+---
+
+{
+  pathname === slug ? (
+    <a class="tap-target" href={slug} aria-current="page">
+      {title}
+    </a>
+  ) : (
+    <a class="tap-target" href={slug}>
+      {title}
+    </a>
+  )
+}
+
+<style>
+  @layer nb.component {
+    a {
+      display: grid;
+      place-content: center;
+    }
+  }
+</style>

package/src/components/astro/PictureFigure.astro

@@ -0,0 +1,44 @@
+---
+const {
+  caption,
+  class: className,
+  fallbackFormat = "webp",
+  formats = ["avif"],
+  height,
+  quality = "mid",
+  src,
+  width,
+  ...rest
+} = Astro.props;
+
+import { Picture } from "astro:assets";
+---
+
+<figure>
+  <Picture
+    alt=""
+    {fallbackFormat}
+    {formats}
+    {height}
+    {quality}
+    {src}
+    {width}
+    {...rest}
+  />
+  <figcaption>{caption}</figcaption>
+</figure>
+
+<style>
+  @layer nb.component {
+    figure {
+      margin: 6px 0;
+    }
+
+    figcaption {
+      width: 100%;
+      padding: 0 2.5%;
+      text-align: center;
+      color: var(--color-subtext1);
+    }
+  }
+</style>

package/src/components/astro/SectionDivider.astro

@@ -0,0 +1,13 @@
+---
+
+---
+
+<hr />
+
+<style>
+  @layer nb.component {
+    hr {
+      margin: 9px 0 0 0;
+    }
+  }
+</style>

package/src/components/astro/Spoiler.astro

@@ -0,0 +1,11 @@
+<details>
+  <slot />
+</details>
+
+<style>
+  @layer nb.component {
+    details {
+      background-color: var(--color-surface0);
+    }
+  }
+</style>

package/src/components/astro/ThemeSwitcher.astro

@@ -0,0 +1,121 @@
+---
+// Based on https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/
+---
+
+<div id="theme-switcher" data-visible="false">
+  <button class="tap-target" aria-pressed="false" data-theme="catppuccin-latte"
+    >Latte</button
+  >
+  <button class="tap-target" aria-pressed="false" data-theme="catppuccin-frappe"
+    >Frappé</button
+  >
+  <button
+    class="tap-target"
+    aria-pressed="false"
+    data-theme="catppuccin-macchiato">Macchiato</button
+  >
+  <button class="tap-target" aria-pressed="false" data-theme="catppuccin-mocha"
+    >Mocha</button
+  >
+</div>
+
+<script>
+  const screenMediaQuerry = window.matchMedia("screen");
+  const applyTheme = (theme: string) => {
+    if (!screenMediaQuerry.matches) {
+      theme = "catppuccin-latte";
+    }
+    const target = document.querySelector(`[data-theme="${theme}"]`);
+
+    document.documentElement.setAttribute("data-selected-theme", theme);
+
+    document
+      .querySelector('[data-theme][aria-pressed="true"]')
+      ?.setAttribute("aria-pressed", "false");
+
+    target?.setAttribute("aria-pressed", "true");
+  };
+
+  const handleThemeSelection = (event: Event) => {
+    const target = event.currentTarget as HTMLButtonElement;
+    const isPressed = target.getAttribute("aria-pressed");
+
+    /* if clicked theme is different from current theme */
+    if (isPressed !== "true") {
+      const theme = target.getAttribute("data-theme");
+      applyTheme(theme);
+      localStorage.setItem("selected-theme", theme);
+    }
+  };
+
+  const handleMediaChannge = (mq: MediaQueryList) => {
+    if (!mq.matches) {
+      return applyTheme("catpuccin-latte");
+    }
+
+    let savedTheme = localStorage.getItem("selected-theme");
+    if (
+      savedTheme === null ||
+      ![
+        "catppuccin-latte",
+        "catppuccin-frappe",
+        "catppuccin-macchiato",
+        "catppuccin-mocha",
+      ].includes(savedTheme)
+    ) {
+      savedTheme = "catppuccin-mocha";
+    }
+
+    applyTheme(savedTheme);
+  };
+
+  let savedTheme = localStorage.getItem("selected-theme");
+  if (
+    savedTheme === null ||
+    ![
+      "catppuccin-latte",
+      "catppuccin-frappe",
+      "catppuccin-macchiato",
+      "catppuccin-mocha",
+    ].includes(savedTheme)
+  ) {
+    savedTheme = "catppuccin-mocha";
+  }
+
+  applyTheme(savedTheme);
+
+  const themeSwitcher = document.querySelector("#theme-switcher");
+  const buttons = themeSwitcher?.querySelectorAll("button");
+
+  buttons?.forEach((button) => {
+    button.addEventListener("click", handleThemeSelection);
+  });
+  screenMediaQuerry.addEventListener("change", handleMediaChannge, {
+    passive: true,
+  });
+</script>
+
+<style>
+  @layer nb.component {
+    :global(.no-js) #theme-switcher,
+    #theme-switcher[data-visible="false"] {
+      display: none;
+    }
+
+    #theme-switcher {
+      display: grid;
+      margin: 9px 0 0 0;
+      gap: 12px;
+      grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 1fr));
+    }
+
+    button {
+      border-color: var(--color-overlay0);
+    }
+
+    button[aria-pressed="true"] {
+      background: var(--color-text);
+      color: var(--color-base);
+    }
+  }
+</style>

package/src/components/astro/ThemeToggle.astro

@@ -0,0 +1,33 @@
+---
+
+---
+
+<button class="tap-target" id="theme-switcher-toggle">Theme Switcher</button>
+
+<script>
+  const handleThemeToggling = (event: Event) => {
+    const themeSwitcher = document.querySelector(
+      "#theme-switcher"
+    ) as HTMLDivElement;
+    const oppositeVisibility =
+      themeSwitcher.getAttribute("data-visible") === "true" ? "false" : "true";
+
+    themeSwitcher.setAttribute("data-visible", oppositeVisibility);
+  };
+
+  const themeSwitcherToggle = document.querySelector(
+    "#theme-switcher-toggle"
+  ) as HTMLButtonElement;
+
+  themeSwitcherToggle.addEventListener("click", handleThemeToggling);
+</script>
+
+<style>
+  @layer nb.component {
+    button {
+      border-color: var(--color-overlay0);
+      display: grid;
+      place-content: center;
+    }
+  }
+</style>

package/src/components/astro/Warning.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import InfoSVG from "../../assets/warning-triangle.svg";
+
+interface Props extends HTMLAttributes<"aside"> {
+  backgroundColor?: string;
+  color?: string;
+  highlightColor?: string;
+  title: string;
+}
+
+const {
+  backgroundColor,
+  color,
+  highlightColor = "var(--color-rosewater)",
+  title = "Warning",
+} = Astro.props;
+---
+
+<aside>
+  <p>
+    <InfoSVG class="aside-icon" />
+    {title}
+  </p>
+  <div>
+    <slot />
+  </div>
+</aside>
+
+<style define:vars={{ color, highlightColor, backgroundColor }}>
+  @layer nb.component {
+    p {
+      display: inline-flex;
+      gap: 3px;
+      align-items: center;
+    }
+    .aside-icon {
+      height: 1.5em;
+      width: 1.5em;
+    }
+    aside {
+      color: var(--color);
+      background-color: var(
+        --backgroundColor,
+        oklch(from var(--highlightColor) calc(l * 0.33) c h)
+      );
+      border-left: 6px solid var(--highlightColor);
+      padding: 9px 0px;
+      padding-left: 18px;
+    }
+  }
+</style>

package/src/components/astro.js

@@ -1,2 +1,12 @@
+export { default as Danger } from "./astro/Danger.astro"
+export { default as Hint } from "./astro/Hint.astro"
 export { default as Information } from "./astro/Information.astro"
+export { default as InlineSpoiler } from "./astro/InlineSpoiler.astro"
+export { default as Navigation } from "./astro/Navigation.astro"
+export { default as PictureFigure } from "./astro/PictureFigure.astro"
 export { default as RemoteSVG } from "./astro/RemoteSVG.astro"
+export { default as SectionDivider } from "./astro/SectionDivider.astro"
+export { default as Spoiler } from "./astro/Spoiler.astro"
+export { default as ThemeSwitcher } from "./astro/ThemeSwitcher.astro"
+export { default as ThemeToggle } from "./astro/ThemeToggle.astro"
+export { default as Warning } from "./astro/Warning.astro"

package/src/components/index.js

@@ -1 +1,2 @@
-export * as Astro from "./astro.js"
+export * as Astro from "./astro.js";
+export * as Solid from "./solid.js";

package/src/components/internal/css/modules/solid/InlineSpoiler.module.css

@@ -0,0 +1,15 @@
+@layer nb.component {
+  .inline_spoiler {
+    display: contents;
+  }
+
+  .inline_spoiler * {
+    display: inline;
+    background-color: var(--color-surface0);
+  }
+
+  .spoiler_text[aria-hidden="true"] {
+    color: transparent;
+    user-select: none;
+  }
+}

package/src/components/solid/InlineSpoiler.tsx

@@ -0,0 +1,38 @@
+import type { Component, JSXElement } from "solid-js";
+import { createSignal, children, Show } from "solid-js";
+
+import styles from "../internal/css/modules/solid/InlineSpoiler.module.css";
+
+export interface InlineSpoilerProps {
+  content_note?: string;
+  children: JSXElement;
+}
+
+export const InlineSpoiler: Component<InlineSpoilerProps> = (
+  props: InlineSpoilerProps
+) => {
+  const safeChildren = children(() => props.children);
+  const [status, setStatus] = createSignal<boolean>(false);
+  return (
+    <button
+      class={styles.inline_spoiler}
+      role="switch"
+      aria-pressed={status()}
+      aria-live="polite"
+      aria-label="Spoiler"
+      onClick={() => setStatus(!status())}
+    >
+      {" "}
+      <span tabIndex={0}>
+        <Show when={props.content_note} keyed>
+          <span>(CN: {props.content_note}) </span>
+        </Show>
+        <span class={styles.spoiler_text} aria-hidden={!status()}>
+          {safeChildren()}
+        </span>
+      </span>{" "}
+    </button>
+  );
+};
+
+export default InlineSpoiler;

package/src/components/solid.js

@@ -0,0 +1 @@
+export { default as InlineSpoiler } from "./solid/InlineSpoiler.tsx";