@studious-creative/yumekit 0.1.10 → 0.1.12

package/dist/components/y-appbar.js

@@ -1,3 +1,5 @@
+import { getIcon } from '../icons/registry.js';
+
 class YumeButton extends HTMLElement {
     static get observedAttributes() {
         return [
@@ -554,25 +556,6 @@ if (!customElements.get("y-button")) {
     customElements.define("y-button", YumeButton);
 }
 
-/**
- * Icon registry — a runtime map of icon names to SVG markup strings.
- *
- * Register only the icons you need for tree-shaking:
- *
- *   import { registerIcon } from "@studious-creative/yumekit";
- *   registerIcon("home", homeSvgString);
- *
- * Or register all bundled icons at once (separate import):
- *
- *   import "@studious-creative/yumekit/icons/all.js";
- */
-
-const icons = new Map();
-
-function getIcon(name) {
-    return icons.get(name) || "";
-}
-
 // Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
 const ALLOWED_ELEMENTS = new Set([
     "svg",
@@ -1431,7 +1414,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.vertical .appbar-header {
                 border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding: var(--_appbar-padding);
+                padding: var(--_appbar-padding) 0;
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
@@ -1443,6 +1426,7 @@ class YumeAppbar extends HTMLElement {
             .appbar.horizontal .appbar-header {
                 border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
                 padding: var(--_appbar-padding);
+                padding-right: var(--spacing-x-large, 16px);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {

package/dist/components/y-avatar.js

@@ -1,28 +1,4 @@
-/**
- * Return a [background, foreground] CSS variable pair for a color scheme.
- * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
- * @param {string} color — one of base, primary, secondary, success, warning, error, help
- * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
- *   Use `null` to pass the raw `color` string through as the background instead.
- * @returns {[string, string]} — [bg var, fg var]
- */
-function getColorVarPair(color, fallbackColor = "base") {
-    const map = {
-        base: ["var(--base-content--)", "var(--base-content-inverse)"],
-        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
-        secondary: [
-            "var(--secondary-content--)",
-            "var(--secondary-content-inverse)",
-        ],
-        success: ["var(--success-content--)", "var(--success-content-inverse)"],
-        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
-        error: ["var(--error-content--)", "var(--error-content-inverse)"],
-        help: ["var(--help-content--)", "var(--help-content-inverse)"],
-    };
-    if (map[color]) return map[color];
-    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
-    return map[fallbackColor] || map.base;
-}
+import { getColorVarPair } from '../modules/helpers.js';
 
 class YumeAvatar extends HTMLElement {
     static get observedAttributes() {

package/dist/components/y-card.js

@@ -1,34 +1,4 @@
-/**
- * Return a [background, foreground] CSS variable pair for a color scheme.
- * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
- * @param {string} color — one of base, primary, secondary, success, warning, error, help
- * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
- *   Use `null` to pass the raw `color` string through as the background instead.
- * @returns {[string, string]} — [bg var, fg var]
- */
-
-// helpers/slot-utils.js
-function hideEmptySlotContainers(shadowRoot, slotsConfig = {}) {
-    Object.entries(slotsConfig).forEach(([slotName, containerSelector]) => {
-        const slot = shadowRoot.querySelector(
-            `slot${slotName ? `[name="${slotName}"]` : ":not([name])"}`,
-        );
-        const container = shadowRoot.querySelector(containerSelector);
-
-        if (slot && container) {
-            const assigned = slot
-                .assignedNodes({ flatten: true })
-                .filter((n) => {
-                    return !(
-                        n.nodeType === Node.TEXT_NODE &&
-                        n.textContent.trim() === ""
-                    );
-                });
-
-            container.style.display = assigned.length > 0 ? "" : "none";
-        }
-    });
-}
+import { hideEmptySlotContainers } from '../modules/helpers.js';
 
 class YumeCard extends HTMLElement {
     static get observedAttributes() {

package/dist/components/y-icon.js

@@ -1,21 +1,4 @@
-/**
- * Icon registry — a runtime map of icon names to SVG markup strings.
- *
- * Register only the icons you need for tree-shaking:
- *
- *   import { registerIcon } from "@studious-creative/yumekit";
- *   registerIcon("home", homeSvgString);
- *
- * Or register all bundled icons at once (separate import):
- *
- *   import "@studious-creative/yumekit/icons/all.js";
- */
-
-const icons = new Map();
-
-function getIcon(name) {
-    return icons.get(name) || "";
-}
+import { getIcon } from '../icons/registry.js';
 
 // Allowlist-based SVG sanitizer — only known-safe elements and attributes are kept.
 const ALLOWED_ELEMENTS = new Set([

package/dist/components/y-input.js

@@ -94,6 +94,13 @@ class YumeInput extends HTMLElement {
             large: "--component-inputs-padding-large",
         }[size];
 
+        const minHeightVar =
+            {
+                small: "var(--sizing-small, 32px)",
+                medium: "var(--sizing-medium, 40px)",
+                large: "var(--sizing-large, 56px)",
+            }[size] || "var(--sizing-medium, 40px)";
+
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`
             :host {
@@ -119,6 +126,7 @@ class YumeInput extends HTMLElement {
                 border: var(--component-inputs-border-width) solid var(--component-input-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
                 padding: var(${paddingVar});
+                min-height: ${minHeightVar};
                 box-sizing: border-box;
                 transition: border-color 0.2s ease-in-out;
             }

package/dist/components/y-progress.js

@@ -1,28 +1,4 @@
-/**
- * Return a [background, foreground] CSS variable pair for a color scheme.
- * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
- * @param {string} color — one of base, primary, secondary, success, warning, error, help
- * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
- *   Use `null` to pass the raw `color` string through as the background instead.
- * @returns {[string, string]} — [bg var, fg var]
- */
-function getColorVarPair(color, fallbackColor = "base") {
-    const map = {
-        base: ["var(--base-content--)", "var(--base-content-inverse)"],
-        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
-        secondary: [
-            "var(--secondary-content--)",
-            "var(--secondary-content-inverse)",
-        ],
-        success: ["var(--success-content--)", "var(--success-content-inverse)"],
-        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
-        error: ["var(--error-content--)", "var(--error-content-inverse)"],
-        help: ["var(--help-content--)", "var(--help-content-inverse)"],
-    };
-    if (map[color]) return map[color];
-    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
-    return map[fallbackColor] || map.base;
-}
+import { getColorVarPair } from '../modules/helpers.js';
 
 class YumeProgress extends HTMLElement {
     static get observedAttributes() {

package/dist/components/y-select.js

@@ -25,6 +25,7 @@ class YumeSelect extends HTMLElement {
             "options",
             "display-mode",
             "close-on-click-outside",
+            "size",
         ];
     }
 
@@ -74,6 +75,7 @@ class YumeSelect extends HTMLElement {
                 "required",
                 "placeholder",
                 "options",
+                "size",
             ].includes(name)
         ) {
             this.render();
@@ -257,6 +259,7 @@ class YumeSelect extends HTMLElement {
         selected.forEach((opt) => {
             const tag = document.createElement("y-tag");
             tag.setAttribute("removable", "");
+            tag.setAttribute("size", "small");
             tag.setAttribute("color", "primary");
             tag.setAttribute("style-type", "filled");
             tag.textContent = opt.label;
@@ -336,6 +339,21 @@ class YumeSelect extends HTMLElement {
 
     applyStyles() {
         const isDisabled = this.hasAttribute("disabled");
+        const size = this.getAttribute("size") || "medium";
+
+        const paddingVar =
+            {
+                small: "--component-inputs-padding-small",
+                medium: "--component-inputs-padding-medium",
+                large: "--component-inputs-padding-large",
+            }[size] || "--component-inputs-padding-medium";
+
+        const minHeightVar =
+            {
+                small: "var(--sizing-small, 32px)",
+                medium: "var(--sizing-medium, 40px)",
+                large: "var(--sizing-large, 56px)",
+            }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`
@@ -361,7 +379,8 @@ class YumeSelect extends HTMLElement {
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
-                padding: var(--component-inputs-padding-medium);
+                padding: var(${paddingVar});
+                min-height: ${minHeightVar};
                 box-sizing: border-box;
                 transition: border-color 0.2s ease-in-out;
                 cursor: pointer;
@@ -433,7 +452,10 @@ class YumeSelect extends HTMLElement {
                 font-size: 1em;
                 color: inherit;
                 display: flex;
+                flex-wrap: wrap;
+                align-items: center;
                 gap: var(--spacing-x-small);
+                min-height: var(--component-tag-height-small, 22px);
             }
 
             .label-wrapper {

package/dist/components/y-theme.d.ts

@@ -6,4 +6,5 @@ export class YumeTheme extends HTMLElement {
     applyVariablesToHost(cssText: any): void;
     _themeProps: any[];
     clearThemeProperties(): void;
+    _injectPageStyles(): void;
 }

package/dist/components/y-theme.js

@@ -27,6 +27,7 @@ class YumeTheme extends HTMLElement {
     }
 
     connectedCallback() {
+        this._injectPageStyles();
         this._applyTheme();
     }
 
@@ -89,6 +90,22 @@ class YumeTheme extends HTMLElement {
         }
         this._themeProps = [];
     }
+
+    _injectPageStyles() {
+        if (document.querySelector("[data-yumekit-page-styles]")) return;
+        const style = document.createElement("style");
+        style.setAttribute("data-yumekit-page-styles", "");
+        style.textContent = `
+            html, body {
+                margin: 0;
+                padding: 0;
+                font-family: var(--font-family-header, "Lexend", sans-serif);
+                color: var(--base-content--, #000);
+                font-weight: 300;
+            }
+        `;
+        document.head.appendChild(style);
+    }
 }
 
 if (!customElements.get("y-theme")) {

package/dist/components/y-toast.js

@@ -1,28 +1,4 @@
-/**
- * Return a [background, foreground] CSS variable pair for a color scheme.
- * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
- * @param {string} color — one of base, primary, secondary, success, warning, error, help
- * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
- *   Use `null` to pass the raw `color` string through as the background instead.
- * @returns {[string, string]} — [bg var, fg var]
- */
-function getColorVarPair(color, fallbackColor = "base") {
-    const map = {
-        base: ["var(--base-content--)", "var(--base-content-inverse)"],
-        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
-        secondary: [
-            "var(--secondary-content--)",
-            "var(--secondary-content-inverse)",
-        ],
-        success: ["var(--success-content--)", "var(--success-content-inverse)"],
-        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
-        error: ["var(--error-content--)", "var(--error-content-inverse)"],
-        help: ["var(--help-content--)", "var(--help-content-inverse)"],
-    };
-    if (map[color]) return map[color];
-    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
-    return map[fallbackColor] || map.base;
-}
+import { getColorVarPair } from '../modules/helpers.js';
 
 class YumeToast extends HTMLElement {
     static get observedAttributes() {

package/dist/components/y-tooltip.js

@@ -1,28 +1,4 @@
-/**
- * Return a [background, foreground] CSS variable pair for a color scheme.
- * Background is `--{color}-content--`, foreground is `--{color}-content-inverse`.
- * @param {string} color — one of base, primary, secondary, success, warning, error, help
- * @param {string} [fallbackColor="base"] — color to fall back to when `color` is unrecognised.
- *   Use `null` to pass the raw `color` string through as the background instead.
- * @returns {[string, string]} — [bg var, fg var]
- */
-function getColorVarPair(color, fallbackColor = "base") {
-    const map = {
-        base: ["var(--base-content--)", "var(--base-content-inverse)"],
-        primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
-        secondary: [
-            "var(--secondary-content--)",
-            "var(--secondary-content-inverse)",
-        ],
-        success: ["var(--success-content--)", "var(--success-content-inverse)"],
-        warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
-        error: ["var(--error-content--)", "var(--error-content-inverse)"],
-        help: ["var(--help-content--)", "var(--help-content-inverse)"],
-    };
-    if (map[color]) return map[color];
-    if (fallbackColor === null) return [color, "var(--base-content-inverse)"];
-    return map[fallbackColor] || map.base;
-}
+import { getColorVarPair } from '../modules/helpers.js';
 
 class YumeTooltip extends HTMLElement {
     static get observedAttributes() {

package/dist/icons/all.js

@@ -1,23 +1,4 @@
-/**
- * Icon registry — a runtime map of icon names to SVG markup strings.
- *
- * Register only the icons you need for tree-shaking:
- *
- *   import { registerIcon } from "@studious-creative/yumekit";
- *   registerIcon("home", homeSvgString);
- *
- * Or register all bundled icons at once (separate import):
- *
- *   import "@studious-creative/yumekit/icons/all.js";
- */
-
-const icons = new Map();
-
-function registerIcons(entries) {
-    for (const [name, svg] of Object.entries(entries)) {
-        icons.set(name, svg);
-    }
-}
+import { registerIcons } from './registry.js';
 
 var ai = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 8V4H8\"/>\n  <rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\"/>\n  <path d=\"M2 14h2M20 14h2M15 13v2M9 13v2\"/>\n</svg>\n";
 

package/dist/index.js

@@ -1694,7 +1694,7 @@ class YumeAppbar extends HTMLElement {
 
             .appbar.vertical .appbar-header {
                 border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
-                padding: var(--_appbar-padding);
+                padding: var(--_appbar-padding) 0;
                 margin-bottom: var(--_appbar-padding);
             }
             .appbar.vertical .appbar-footer {
@@ -1706,6 +1706,7 @@ class YumeAppbar extends HTMLElement {
             .appbar.horizontal .appbar-header {
                 border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
                 padding: var(--_appbar-padding);
+                padding-right: var(--spacing-x-large, 16px);
                 margin-right: var(--_appbar-padding);
             }
             .appbar.horizontal .appbar-footer {
@@ -3437,6 +3438,13 @@ class YumeInput extends HTMLElement {
             large: "--component-inputs-padding-large",
         }[size];
 
+        const minHeightVar =
+            {
+                small: "var(--sizing-small, 32px)",
+                medium: "var(--sizing-medium, 40px)",
+                large: "var(--sizing-large, 56px)",
+            }[size] || "var(--sizing-medium, 40px)";
+
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`
             :host {
@@ -3462,6 +3470,7 @@ class YumeInput extends HTMLElement {
                 border: var(--component-inputs-border-width) solid var(--component-input-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
                 padding: var(${paddingVar});
+                min-height: ${minHeightVar};
                 box-sizing: border-box;
                 transition: border-color 0.2s ease-in-out;
             }
@@ -4463,6 +4472,7 @@ class YumeSelect extends HTMLElement {
             "options",
             "display-mode",
             "close-on-click-outside",
+            "size",
         ];
     }
 
@@ -4512,6 +4522,7 @@ class YumeSelect extends HTMLElement {
                 "required",
                 "placeholder",
                 "options",
+                "size",
             ].includes(name)
         ) {
             this.render();
@@ -4695,6 +4706,7 @@ class YumeSelect extends HTMLElement {
         selected.forEach((opt) => {
             const tag = document.createElement("y-tag");
             tag.setAttribute("removable", "");
+            tag.setAttribute("size", "small");
             tag.setAttribute("color", "primary");
             tag.setAttribute("style-type", "filled");
             tag.textContent = opt.label;
@@ -4774,6 +4786,21 @@ class YumeSelect extends HTMLElement {
 
     applyStyles() {
         const isDisabled = this.hasAttribute("disabled");
+        const size = this.getAttribute("size") || "medium";
+
+        const paddingVar =
+            {
+                small: "--component-inputs-padding-small",
+                medium: "--component-inputs-padding-medium",
+                large: "--component-inputs-padding-large",
+            }[size] || "--component-inputs-padding-medium";
+
+        const minHeightVar =
+            {
+                small: "var(--sizing-small, 32px)",
+                medium: "var(--sizing-medium, 40px)",
+                large: "var(--sizing-large, 56px)",
+            }[size] || "var(--sizing-medium, 40px)";
 
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(`
@@ -4799,7 +4826,8 @@ class YumeSelect extends HTMLElement {
                 background: var(--component-select-background);
                 border: var(--component-inputs-border-width) solid var(--component-select-border-color);
                 border-radius: var(--component-inputs-border-radius-outer);
-                padding: var(--component-inputs-padding-medium);
+                padding: var(${paddingVar});
+                min-height: ${minHeightVar};
                 box-sizing: border-box;
                 transition: border-color 0.2s ease-in-out;
                 cursor: pointer;
@@ -4871,7 +4899,10 @@ class YumeSelect extends HTMLElement {
                 font-size: 1em;
                 color: inherit;
                 display: flex;
+                flex-wrap: wrap;
+                align-items: center;
                 gap: var(--spacing-x-small);
+                min-height: var(--component-tag-height-small, 22px);
             }
 
             .label-wrapper {
@@ -6966,6 +6997,7 @@ class YumeTheme extends HTMLElement {
     }
 
     connectedCallback() {
+        this._injectPageStyles();
         this._applyTheme();
     }
 
@@ -7028,6 +7060,22 @@ class YumeTheme extends HTMLElement {
         }
         this._themeProps = [];
     }
+
+    _injectPageStyles() {
+        if (document.querySelector("[data-yumekit-page-styles]")) return;
+        const style = document.createElement("style");
+        style.setAttribute("data-yumekit-page-styles", "");
+        style.textContent = `
+            html, body {
+                margin: 0;
+                padding: 0;
+                font-family: var(--font-family-header, "Lexend", sans-serif);
+                color: var(--base-content--, #000);
+                font-weight: 300;
+            }
+        `;
+        document.head.appendChild(style);
+    }
 }
 
 if (!customElements.get("y-theme")) {