@johnhenry/respondable 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 John Henry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# respondable
+
+[![npm version](https://img.shields.io/npm/v/%40johnhenry%2Frespondable.svg)](https://www.npmjs.com/package/@johnhenry/respondable)
+[![CI](https://github.com/johnhenry/respondable/actions/workflows/ci.yml/badge.svg)](https://github.com/johnhenry/respondable/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/%40johnhenry%2Frespondable.svg)](LICENSE)
+
+Full documentation: [opensource.johnhenry.me/respondable](https://opensource.johnhenry.me/respondable/)
+
+> **Provenance:** extracted from [`johnhenry/lib`](https://github.com/johnhenry/lib)'s
+> `js/` directory. Briefly part of [`@johnhenry/domkit`](https://github.com/johnhenry/domkit)
+> (a toolkit of ~40 independent DOM/HTML-component modules), then split out
+> as its own package because these two elements are two duals of the same
+> idea -- respond to a media query by swapping vs. by styling -- with a
+> shared query-string grammar and a real dependency
+> ([`parsel-js`](https://github.com/LeaVerou/parsel)) neither of domkit's
+> other widgets needed.
+
+Two custom elements for responding to CSS media queries declaratively,
+without writing `matchMedia()`/`ResizeObserver` JavaScript by hand:
+
+| Module | What it does |
+|---|---|
+| [`query-container.component`](src/query-container.component/readme.md) | `<query-component query="[(min-width:600px)] ol.wide">` -- swaps the rendered child element entirely by media query. |
+| [`attribute-provider.component`](src/attribute-provider.component/readme.md) | `<attribute-provider classes="[(min-width:512px)] wide">` -- applies classes/styles/attributes to an existing child by media query, instead of swapping it. |
+
+Both parse the same pipe (`|`)-delimited `[media query] value` grammar via
+[`parsel-js`](https://github.com/LeaVerou/parsel) — a real npm dependency,
+not a vendored copy.
+
+## Which one do I want?
+
+| I want to... | Use |
+|---|---|
+| Show an entirely different element by breakpoint | `query-container.component` |
+| Style/class/attribute an existing element by breakpoint, without replacing it | `attribute-provider.component` |
+
+## Install
+
+```sh
+npm install @johnhenry/respondable
+```
+
+or, in a browser with no build step, via a CDN (bootstrapped through
+[`@johnhenry/definable`](https://github.com/johnhenry/definable)'s
+`define-component.component`, since neither module here has its own
+`global.mjs` — see each module's own readme for the full pattern):
+
+```html
+<script
+  type="module"
+  src="https://esm.sh/@johnhenry/definable/define-component.component/global.mjs"
+></script>
+<define-component
+  name="query-component"
+  src="https://esm.sh/@johnhenry/respondable/query-container.component/index.mjs"
+></define-component>
+```
+
+## Family
+
+- [`@johnhenry/definable`](https://github.com/johnhenry/definable) --
+  both modules' own demos bootstrap themselves via its
+  `define-component.component` (`<define-component>`), since neither has a
+  self-registering `global.mjs` of its own.
+- [`@johnhenry/domkit`](https://github.com/johnhenry/domkit) -- the toolkit
+  this package was originally part of.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@johnhenry/respondable",
+  "version": "0.0.0",
+  "description": "Respond to CSS media queries declaratively -- swap an element entirely (query-container) or apply classes/styles/attributes to existing children (attribute-provider).",
+  "type": "module",
+  "exports": {
+    "./*": "./src/*"
+  },
+  "files": [
+    "src/"
+  ],
+  "scripts": {
+    "test": "node scripts/check-syntax.mjs"
+  },
+  "keywords": [
+    "html",
+    "dom",
+    "web-components",
+    "custom-elements",
+    "media-queries",
+    "responsive"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johnhenry/respondable.git"
+  },
+  "homepage": "https://opensource.johnhenry.me/respondable/",
+  "engines": {
+    "node": ">=26.0.0"
+  },
+  "dependencies": {
+    "parsel-js": "^1.2.3"
+  }
+}

package/src/attribute-provider.component/demo.htm

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="https://johnhenry.github.io/lib/css/blank-slate/0.0.0/index.css" />
+    <link rel="stylesheet" href="./index.css" />
+    <style>
+      .until-window-load {
+        visibility: hidden;
+      }
+      #height::before {
+        content: var(--window-height-str);
+      }
+      #width::before {
+        content: var(--window-width-str);
+      }
+    </style>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/until-window-load/global.mjs"
+    ></script>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/define-component.component/global.mjs"
+    ></script>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/define-component-by-content.component/global.mjs"
+    ></script>
+    <define-component
+      name="attribute-provider"
+      src="./index.mjs"
+    ></define-component>
+    <define-component-by-content
+      name="h-1"
+      shadow
+      mode="open"
+      use-dom="true"
+      content="<h1><slot /></h1>"
+    ></define-component-by-content>
+    <style>
+      attribute-provider {
+        margin: 0;
+        padding: 0;
+      }
+
+      div {
+        display: inline-grid;
+        width: 64px;
+        height: 64px;
+        place-content: center;
+        background-color: aliceblue;
+        /* vertical-align: top; */
+      }
+      .red {
+        background-color: red;
+      }
+      .green {
+        background-color: green;
+      }
+      .yellow {
+        background-color: yellow;
+      }
+      .border {
+        border: 8px solid black;
+      }
+      .tall::before {
+        content: "T";
+      }
+
+      .wide::before {
+        content: "W";
+      }
+
+    </style>
+  </head>
+  <body>
+    <h1>Attribute Provider Class</h1>
+    <p>
+      The attribute provider web-component provides attributes
+      to its immediate children based on media queries.
+    </p>
+
+
+    <h2>Attributes</h2>
+    <p>
+      The attribute-provider components
+      provides attributes to its first child
+      based on media queries (screen width, orientation, etc.).
+    </p>
+    <h3>Attribute syntax</h3>
+    <p>
+      Pass the folling syntax to the 'attributes' attribute:
+      <pre>
+      &lt;attribute-provider attributes="
+        [{media query}]
+          {attribute name}={attribute value};
+          {2nd attribute name}={2nd attribute value}|
+        [{2nd media query}]
+          {attribute name}={attribute value};
+          {2nd attribute name}={2nd attribute value}|
+        ..."&gt;
+        &lt;/attribute-provider&gt;
+      </pre>
+      Note that a pipe ("|") delimits query sections while a semicolon (";") delimits individual attribute settings.
+    </p>
+    <p>
+      Ensure to cover all possibly query cases as attributes do not reset upon media query change
+    </p>
+    <p>
+      Pass 'null' (no quotes) to unset a value
+    </p>
+    <h3>Attribute example</h3>
+    <attribute-provider
+      class="until-window-load"
+      attributes="
+      [(max-width:512px)] disabled=null;hidden=null;placeholder='enabled'|
+      [(min-width:512px) and (max-width:768px)] disabled;hidden=null; placeholder='disabled: too wide'|
+      [(min-width:768px)] hidden;"
+    >
+      <input />
+    </attribute-provider>
+    <h2>Classes and Style</h2>
+    <p>
+      Unlike attributes,
+      classes and styles DO automatically reset (when
+      specified directly). No need to cover the case where the no longer apply.
+    </p>
+    <h3>Class syntax</h3>
+    <p>
+      Pass the folling syntax to the 'classes' attribute:
+      <pre>
+      &lt;attribute-provider classes="
+        [{media query}] {class 1} {class 2} {class 3}|
+        [{2nd media query}] {class 1} {class 2} {class 3}|
+        ..."&gt;
+        &lt;/attribute-provider&gt;
+      </pre>
+      Note that a pipe ("|") delimits query sections while a space (" ") delimits individual classes.
+    </p>
+    <h3>Style syntax</h3>
+    <p>
+      Pass the folling syntax to the 'styles' attribute:
+      <pre>
+      &lt;attribute-provider styles="
+        [{media query}]
+          {style property}:{style value};
+          {2nd style property}:{2nd style value}|
+        [{2nd media query}]
+          {style property}:{style value};
+          {2nd style property}:{2nd style value}|
+        ..."&gt;
+        &lt;/attribute-provider&gt;
+      </pre>
+      Note that a pipe ("|") delimits query sections while a semicolon (";") delimits individual style declarations.
+    </p>
+    <h3>Class example / Style example </h3>
+    <attribute-provider
+      class="until-window-load"
+      classes="
+      red|
+      [(min-width:512px) and (max-width:768px)] green border |
+      [(min-width:640px) and (max-width:896px)] yellow |
+      [(orientation:portrait)] tall |
+      [(orientation:landscape)] wide
+      "
+    >
+    <div></div>
+    </attribute-provider>
+    /
+    <attribute-provider
+      class="until-window-load"
+      styles="
+      background-color:red |
+      [(min-width:512px) and (max-width:768px)] background-color:green; border: 8px solid black; |
+      [(min-width:640px) and (max-width:896px)] background-color:yellow |
+      [(orientation:portrait)] --tall:block |
+      [(orientation:landscape)] --wide:block
+      "
+    >
+      <div>
+        <span style="display: var(--tall, none)">T</span>
+        <span style="display: var(--wide, none)">W</span>
+      </div>
+    </attribute-provider>
+  </body>
+</html>

package/src/attribute-provider.component/index.mjs

@@ -0,0 +1,213 @@
+const exp = /\[(.+)\](.+)/;
+
+const stripQuotes = (string, quotes = ["'", '"', "`"]) => {
+  for (const quote of quotes) {
+    if (string.startsWith(quote) && string.endsWith(quote)) {
+      return string.slice(1, -1);
+    }
+  }
+  return string;
+};
+
+const parseQueries = (queries) =>
+  queries
+    .trim()
+    .split("|")
+    .map((x) => x.trim())
+    .filter((x) => x);
+
+export default class extends HTMLElement {
+  #classes;
+  #styles;
+  #attributes;
+  #observer;
+  #mediaMatches;
+  constructor() {
+    super();
+    this.#observer = new globalThis.MutationObserver(this.setAll.bind(this));
+    this.#observer.observe(this, { childList: true });
+    this.#mediaMatches = {};
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    this.#observer.disconnect();
+    for (const mediaMatches of Object.values(this.#mediaMatches)) {
+      for (const m of mediaMatches) {
+        m.onchange = null;
+      }
+    }
+  }
+  static get observedAttributes() {
+    return ["classes", "styles", "attributes"];
+  }
+  setClasses() {
+    const queries = this.getAttribute("classes") || "";
+    this.#classes = new Map();
+    const mediaMatches = (this.#mediaMatches["classes"] = new Set());
+    for (const mediaQuery of parseQueries(queries)) {
+      let query, selector;
+      if (exp.test(mediaQuery)) {
+        [, query, selector] = exp.exec(mediaQuery);
+        query = query.trim();
+        selector = selector.trim();
+      } else {
+        query = "";
+        selector = mediaQuery.trim();
+      }
+      this.#classes.set(
+        globalThis.matchMedia(query),
+        selector.trim().split(" ")
+      );
+
+      const m = globalThis.matchMedia(query);
+      m.onchange = (e) => {
+        this.triggerClass(e);
+      };
+      mediaMatches.add(m);
+    }
+    this.triggerClass();
+  }
+  setStyles() {
+    const queries = this.getAttribute("styles") || "";
+    this.#styles = new Map();
+    const mediaMatches = (this.#mediaMatches["styles"] = new Set());
+    for (const mediaQuery of parseQueries(queries)) {
+      let query, selector;
+      if (exp.test(mediaQuery)) {
+        [, query, selector] = exp.exec(mediaQuery);
+        query = query.trim();
+        selector = selector.trim();
+      } else {
+        query = "";
+        selector = mediaQuery.trim();
+      }
+      this.#styles.set(
+        globalThis.matchMedia(query),
+        selector
+          .trim()
+          .split(";")
+          .filter((x) => x)
+      );
+
+      const m = globalThis.matchMedia(query);
+      m.onchange = (e) => {
+        this.triggerStyle(e);
+      };
+      mediaMatches.add(m);
+    }
+    this.triggerStyle();
+  }
+  setAttributes() {
+    const queries = this.getAttribute("attributes") || "";
+    this.#attributes = new Map();
+    const mediaMatches = (this.#mediaMatches["attributes"] = new Set());
+    for (const mediaQuery of parseQueries(queries)) {
+      let query, selector;
+      if (exp.test(mediaQuery)) {
+        [, query, selector] = exp.exec(mediaQuery);
+        query = query.trim();
+        selector = selector.trim();
+      } else {
+        query = "";
+        selector = mediaQuery.trim();
+      }
+
+      this.#attributes.set(
+        globalThis.matchMedia(query),
+        selector
+          .trim()
+          .split(";")
+          .filter((x) => x)
+          .reduce((acc, curr) => {
+            let [key, value] = curr.split("=", 2);
+            if (!key) {
+              return;
+            }
+
+            key = key.trim();
+            if (value === undefined) {
+              value = "";
+            }
+            if (value === "null") {
+              value = null;
+            }
+            if (value) {
+              value = stripQuotes(value.trim());
+            }
+            acc.push([key.trim(), value]);
+            return acc;
+          }, [])
+      );
+
+      const m = globalThis.matchMedia(query);
+      m.onchange = (e) => {
+        this.triggerAttribute(e);
+      };
+      mediaMatches.add(m);
+    }
+    this.triggerAttribute();
+  }
+  triggerClass() {
+    const classArray = this.getByKey("classes");
+    for (const kid of this.kids) {
+      const { classList } = kid;
+      classList.remove(...classList);
+      classList.add(...classArray);
+    }
+  }
+  triggerStyle() {
+    const styleArray = this.getByKey("styles");
+    for (const kid of this.kids) {
+      kid.setAttribute("style", styleArray.join(";"));
+    }
+  }
+  triggerAttribute() {
+    const attributeArray = this.getByKey("attributes");
+    for (const kid of this.kids) {
+      for (const [key, value] of attributeArray) {
+        if (value === null) {
+          kid.removeAttribute(key);
+        } else {
+          kid.setAttribute(key, value);
+        }
+      }
+    }
+  }
+  setAll() {
+    this.setClasses();
+    this.setStyles();
+    this.setAttributes();
+  }
+  attributeChangedCallback(name, prev, current) {
+    this.setAll();
+  }
+  get kids() {
+    return Array.prototype.filter.call(
+      this.childNodes,
+      (x) => x.nodeType === 1
+    );
+  }
+  getByKey(key) {
+    let result = [];
+    let arr;
+    switch (key) {
+      case "classes":
+        arr = this.#classes;
+        break;
+      case "styles":
+        arr = this.#styles;
+        break;
+      case "attributes":
+        arr = this.#attributes;
+        break;
+    }
+    if (arr) {
+      for (const [query, items] of arr) {
+        if (query.matches) {
+          result.push(...items);
+        }
+      }
+    }
+    return result;
+  }
+}

package/src/attribute-provider.component/readme.md

@@ -0,0 +1,79 @@
+# Attribute Provider
+
+Applies classes, inline styles, and/or attributes to an element's
+immediate children based on media queries (screen width, orientation,
+etc.) — re-evaluated on every matching query change.
+
+Compare [query-container.component](../query-container.component/readme.md),
+which swaps its rendered child element entirely by media query instead of
+styling the existing one.
+
+## Attributes
+
+Each of `classes`/`styles`/`attributes` accepts one or more
+`[media query] value` sections, pipe (`|`)-delimited. A section with no
+`[media query]` prefix always applies.
+
+### `classes`
+
+Space-delimited class names per section. Classes reset automatically when
+no longer matched.
+
+```html
+<attribute-provider
+  classes="
+    red|
+    [(min-width:512px) and (max-width:768px)] green border|
+    [(orientation:portrait)] tall
+  "
+>
+  <div></div>
+</attribute-provider>
+```
+
+### `styles`
+
+Semicolon-delimited `property:value` declarations per section. Styles
+reset automatically when no longer matched.
+
+```html
+<attribute-provider
+  styles="
+    background-color:red|
+    [(min-width:512px) and (max-width:768px)] background-color:green; border: 8px solid black
+  "
+>
+  <div></div>
+</attribute-provider>
+```
+
+### `attributes`
+
+Semicolon-delimited `name=value` pairs per section. Use `null` (no quotes)
+to remove an attribute. **Attributes do NOT reset automatically** —
+unlike `classes`/`styles`, every query case must explicitly say what to do
+with each attribute.
+
+```html
+<attribute-provider
+  attributes="
+    [(max-width:512px)] disabled=null;hidden=null;placeholder='enabled'|
+    [(min-width:512px) and (max-width:768px)] disabled;hidden=null|
+    [(min-width:768px)] hidden
+  "
+>
+  <input />
+</attribute-provider>
+```
+
+## Usage
+
+```html
+<script
+  type="module"
+  src="https://esm.sh/@johnhenry/definable/define-component.component/global.mjs"
+></script>
+<define-component name="attribute-provider" src="./index.mjs"></define-component>
+```
+
+See `demo.htm` for a full working example of all three attributes.

package/src/query-container.component/demo.htm

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      .until-window-load {
+        visibility: hidden;
+      }
+      #height::before {
+        content: var(--window-height-str);
+      }
+      #width::before {
+        content: var(--window-width-str);
+      }
+    </style>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/until-window-load/global.mjs"
+    ></script>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/define-component.component/global.mjs"
+    ></script>
+    <script
+      type="module"
+      src="https://esm.sh/@johnhenry/definable/define-component-by-content.component/global.mjs"
+    ></script>
+    <define-component
+      name="query-component"
+      src="./index.mjs"
+    ></define-component>
+    <define-component-by-content
+      name="h-1"
+      shadow
+      mode="open"
+      use-dom="true"
+      content="<h1><slot /></h1>"
+    ></define-component-by-content>
+  </head>
+  <body>
+    <h1>Demo: Query Container</h1>
+    <query-component
+      class="until-window-load"
+      default="ul"
+      query="[(min-width:600x) and (max-width:900px)] ol.ordered[style=color:red] | [(min-width:900px)] dl.ordered[style=color:blue;font-weight:bold]"
+    >
+      <query-component default="template" query="[(min-width:900px)] dt"
+        >Width</query-component
+      >
+      <query-component
+        default="li#width"
+        query="[(min-width:900px)] dd#width"
+      ></query-component>
+      <query-component default="template" query="[(min-width:900px)] dt"
+        >Height</query-component
+      >
+      <query-component
+        default="li#height"
+        query="[(min-width:900px)] dd#height"
+      ></query-component>
+    </query-component>
+
+    <hr />
+    <!-- old and working-->
+    <query-component
+      class="until-window-load"
+      default="ul"
+      query="
+    [(min-width:300px) and (max-width:900px)] ol.ordered[style=color:blue]|
+    [(min-width:400px) and (max-width:600px)] ol.ordered[style=color:red;font-weight:bold]"
+    >
+      <li>a</li>
+      <li>b</li>
+      <li>c</li>
+    </query-component>
+    <query-component
+      class="until-window-load"
+      default="ul"
+      query="
+    [(min-width:600px)] dl"
+    >
+      <query-component default="li" query="[(min-width:600px)] dt"
+        >Definition:</query-component
+      >
+      <query-component default="" query=" [(min-width:600px)] dd.hello"
+        >Term</query-component
+      >
+    </query-component>
+  </body>
+</html>

package/src/query-container.component/index.mjs

@@ -0,0 +1,138 @@
+import { tokenize } from "parsel-js";
+/*
+  <query-component
+    default="ul"
+    query="[(min-width:300px) and (max-width:1200px)] ol.ordered[style=color:blue];"
+  ></query-component>
+  -- see readme.md for the full example.
+*/
+const exp = /\[(.+)\](.+)/;
+const elementFromSelector = (selector = "") => {
+  let tag = "template";
+  let id = undefined;
+  const classes = [];
+  const attributes = {};
+  if (selector) {
+    for (const token of tokenize(selector)) {
+      switch (token.type) {
+        case "id":
+          id = token.name;
+          break;
+        case "type":
+          tag = token.content;
+          break;
+        case "class":
+          classes.push(token.name);
+          break;
+        case "attribute":
+          attributes[token.name] = token.value;
+          break;
+      }
+    }
+  }
+  const element = globalThis.document.createElement(tag); //tag
+  if (id) {
+    element.id = id;
+  }
+  element.classList.add(...classes); //classes
+  for (const [key, value] of Object.entries(attributes)) {
+    // attributes
+    element.setAttribute(key, value);
+  }
+  return element;
+};
+
+export default class extends HTMLElement {
+  #content;
+  #queries;
+  #default;
+  #observer;
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.#observer = new globalThis.MutationObserver(this.update.bind(this));
+    this.#observer.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    this.#observer.disconnect();
+    if (this.#queries) {
+      for (const query of this.#queries.keys()) {
+        query.onchange = null;
+      }
+    }
+  }
+  static get observedAttributes() {
+    return ["default", "query"];
+  }
+  setInitial(selector) {
+    this.#default = elementFromSelector(selector);
+    this.#content = this.#default;
+    this.appendChild(this.#content);
+    this.triggerQuery();
+  }
+  setQueries(queries) {
+    this.#queries = new Map();
+    let firstSelector = "";
+    for (const mediaQuery of queries
+      .trim()
+      .split("|")
+      .map((x) => x.trim())
+      .filter((x) => x)) {
+      const [, query, selector] = exp.exec(mediaQuery);
+      firstSelector = firstSelector || selector;
+      this.#queries.set(
+        globalThis.matchMedia(query),
+        elementFromSelector(selector)
+      );
+      const m = globalThis.matchMedia(query);
+      m.onchange = (e) => {
+        this.triggerQuery(e);
+      };
+    }
+    if (this.#default) {
+      this.triggerQuery();
+    } else {
+      this.setInitial(firstSelector);
+    }
+  }
+  triggerQuery() {
+    let element = this.#default;
+    if (this.#queries) {
+      for (const [query, selected] of this.#queries) {
+        if (query.matches) {
+          element = selected;
+        }
+      }
+    }
+    if (this.contains(this.#content)) {
+      if (element !== this.#content) {
+        element.append(...this.#content.childNodes);
+        this.removeChild(this.#content);
+        this.#content = element;
+        this.appendChild(this.#content);
+        this.update();
+      }
+    }
+  }
+  attributeChangedCallback(name, prev, current) {
+    switch (name) {
+      case "default":
+        this.setInitial(current);
+        break;
+      case "query":
+        this.setQueries(current);
+        break;
+    }
+  }
+  update() {
+    for (const child of [...this.childNodes]) {
+      if (child === this.#content) {
+        continue;
+      }
+      if (this.#content) {
+        this.#content.appendChild(child);
+      }
+    }
+  }
+}

package/src/query-container.component/readme.md

@@ -0,0 +1,32 @@
+# Query Container HTML Component
+
+Containter that changes based on a given media query
+
+Inspired by: https://github.com/tabvengers/spicy-sections
+
+## Example usage Usage
+
+Single query:
+
+This following will produce an ordered list
+with class name 'ordered' and blue text
+when the window's width is between 400px and 900px.
+
+```html
+<script
+  type="module"
+  src="https://esm.sh/@johnhenry/definable/define-component.component/global.mjs"
+></script>
+<define-component name="query-component" src="./index.mjs"></define-component>
+<query-component
+  default="ul"
+  query="
+    [(min-width:300px) and (max-width:1200px)] ol.ordered[style=color:blue];
+    [(min-width:400px) and (max-width:600px)] ol.ordered[style=color:red];
+    "
+>
+  <li>a</li>
+  <li>b</li>
+  <li>c</li>
+</query-component>
+```