@d-zero/custom-components 5.0.0-alpha.45 → 5.0.0-beta.0

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,25 @@
+export declare class Breadcrumbs extends HTMLElement {
+    #private;
+    get separator(): string;
+    set separator(value: string | null);
+    constructor();
+    attributeChangedCallback(name: string, _: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static readonly defaultSeparator = "/";
+    static defaultStyle: Readonly<{
+        readonly separatorColor: "currentColor";
+        readonly separatorSpacingValue: 0.5;
+        readonly separatorSpacingUnit: "em";
+        readonly color: "currentColor";
+        readonly currentColor: "currentColor";
+        readonly font: "inherit";
+        readonly currentFont: "inherit";
+    }>;
+    static get observedAttributes(): string[];
+}
+/**
+ * @param prefix
+ */
+export declare function defineBreadcrumbs(prefix: string): string;
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../src/breadcrumbs.ts"],"names":[],"mappings":"AAEA,qBAAa,WAAY,SAAQ,WAAW;;IAM3C,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAmBjC;;IAkED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAWhF,iBAAiB;IAUjB,oBAAoB;IA6GpB,MAAM,CAAC,QAAQ,CAAC,gBAAgB,OAAO;IAEvC,MAAM,CAAC,YAAY;;;;;;;;OAQP;IAEZ,MAAM,KAAK,kBAAkB,aAE5B;CACD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAMxD"}

package/dist/breadcrumbs.js

@@ -0,0 +1,197 @@
+export class Breadcrumbs extends HTMLElement {
+    #observer;
+    #ol;
+    #separator;
+    #shadowRoot;
+    get separator() {
+        return this.#separator;
+    }
+    set separator(value) {
+        const newValue = value === null ? Breadcrumbs.defaultSeparator : value;
+        if (this.#separator === newValue) {
+            return;
+        }
+        this.#separator = newValue;
+        const currentAttr = this.getAttribute('separator');
+        if (currentAttr !== newValue) {
+            if (newValue === Breadcrumbs.defaultSeparator && value === null) {
+                this.removeAttribute('separator');
+            }
+            else {
+                this.setAttribute('separator', newValue);
+            }
+        }
+        this.#updateBreadcrumbs();
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'open' });
+        if (this.hasAttribute('separator')) {
+            this.#separator = this.getAttribute('separator') ?? Breadcrumbs.defaultSeparator;
+        }
+        else {
+            this.#separator = Breadcrumbs.defaultSeparator;
+        }
+        const style = document.createElement('style');
+        style.textContent = `
+			:host {
+				--separator-color: ${Breadcrumbs.defaultStyle.separatorColor};
+				--separator-spacing: ${Breadcrumbs.defaultStyle.separatorSpacingValue}${Breadcrumbs.defaultStyle.separatorSpacingUnit};
+				--color: ${Breadcrumbs.defaultStyle.color};
+				--current-color: ${Breadcrumbs.defaultStyle.currentColor};
+				--font: ${Breadcrumbs.defaultStyle.font};
+				--current-font: ${Breadcrumbs.defaultStyle.currentFont};
+				display: block;
+			}
+			* {
+				box-sizing: border-box;
+			}
+			ol {
+				font: var(--font);
+				color: var(--color);
+				display: flex;
+				flex-wrap: wrap;
+				list-style: none;
+				padding: 0;
+				margin: 0;
+			}
+			li {
+				display: inline-flex;
+				align-items: center;
+			}
+			:host::part(separator) {
+				display: block;
+				margin: 0 var(--separator-spacing);
+				color: var(--separator-color);
+			}
+			a {
+				font: inherit;
+				color: inherit;
+			}
+			a[aria-current="page"] {
+				font: var(--current-font);
+				color: var(--current-color);
+			}
+		`;
+        this.#ol = document.createElement('ol');
+        this.#ol.setAttribute('itemscope', '');
+        this.#ol.setAttribute('itemtype', 'https://schema.org/BreadcrumbList');
+        this.#shadowRoot.append(style);
+        this.#shadowRoot.append(this.#ol);
+        this.#observer = new MutationObserver(() => {
+            this.#updateBreadcrumbs();
+        });
+    }
+    attributeChangedCallback(name, _, newValue) {
+        if (name === 'separator') {
+            const internalValue = newValue === null ? Breadcrumbs.defaultSeparator : newValue;
+            if (this.#separator !== internalValue) {
+                this.#separator = internalValue;
+                this.#updateBreadcrumbs();
+            }
+        }
+    }
+    connectedCallback() {
+        this.#observer.observe(this, {
+            childList: true,
+            subtree: false,
+            characterData: true,
+        });
+        this.#updateBreadcrumbs();
+    }
+    disconnectedCallback() {
+        this.#observer.disconnect();
+    }
+    #checkForInvalidTextNodes() {
+        for (let i = 0; i < this.childNodes.length; i++) {
+            const node = this.childNodes[i];
+            if (node &&
+                node.nodeType === Node.TEXT_NODE &&
+                node.textContent &&
+                node.textContent.trim()) {
+                throw new Error('Text nodes are not allowed. All items must be explicitly specified as <a> elements. Example: <a href="/path">text</a>');
+            }
+        }
+    }
+    #createBreadcrumbItem({ text, href, position, isCurrent = false, isLast = false, }) {
+        const li = document.createElement('li');
+        li.setAttribute('itemscope', '');
+        li.setAttribute('itemprop', 'itemListElement');
+        li.setAttribute('itemtype', 'https://schema.org/ListItem');
+        const link = document.createElement('a');
+        link.setAttribute('itemscope', '');
+        link.setAttribute('itemprop', 'item');
+        link.setAttribute('itemtype', 'https://schema.org/WebPage');
+        link.setAttribute('href', href);
+        link.setAttribute('itemid', href);
+        if (isCurrent) {
+            link.setAttribute('aria-current', 'page');
+        }
+        const nameSpan = document.createElement('span');
+        nameSpan.setAttribute('itemprop', 'name');
+        nameSpan.textContent = text;
+        link.append(nameSpan);
+        const positionMeta = document.createElement('meta');
+        positionMeta.setAttribute('itemprop', 'position');
+        positionMeta.setAttribute('content', position.toString());
+        li.append(link);
+        li.append(positionMeta);
+        if (!isLast) {
+            const separator = document.createElement('span');
+            separator.setAttribute('aria-hidden', 'true');
+            separator.part.add('separator');
+            separator.textContent = this.separator;
+            li.append(separator);
+        }
+        return li;
+    }
+    #updateBreadcrumbs() {
+        this.#ol.innerHTML = '';
+        this.#checkForInvalidTextNodes();
+        const links = [...this.querySelectorAll('a')];
+        if (links.length === 0)
+            return;
+        for (let i = 0; i < links.length; i++) {
+            const link = links[i];
+            if (!link)
+                continue;
+            const isLast = i === links.length - 1;
+            const href = link.getAttribute('href');
+            if (!href) {
+                throw new Error(`Breadcrumb link (${link.textContent || 'noname'}) requires href attribute`);
+            }
+            const isCurrent = isLast || link.hasAttribute('aria-current');
+            const li = this.#createBreadcrumbItem({
+                text: link.textContent || '',
+                href: href,
+                position: i + 1,
+                isCurrent: isCurrent,
+                isLast: isLast,
+            });
+            this.#ol.append(li);
+        }
+    }
+    static defaultSeparator = '/';
+    static defaultStyle = Object.freeze({
+        separatorColor: 'currentColor',
+        separatorSpacingValue: 0.5,
+        separatorSpacingUnit: 'em',
+        color: 'currentColor',
+        currentColor: 'currentColor',
+        font: 'inherit',
+        currentFont: 'inherit',
+    });
+    static get observedAttributes() {
+        return ['separator'];
+    }
+}
+/**
+ * @param prefix
+ */
+export function defineBreadcrumbs(prefix) {
+    const tagName = `${prefix}-breadcrumbs`;
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumbs);
+    }
+    return tagName;
+}

package/dist/breadcrumbs.stories.d.ts

@@ -0,0 +1,74 @@
+import type { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    component: string;
+    argTypes: {
+        separator: {
+            control: "text";
+            name: string;
+            description: string;
+            defaultValue: string;
+        };
+        separatorColor: {
+            control: "color";
+            name: string;
+            description: string;
+            defaultValue: "currentColor";
+        };
+        separatorSpacingValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 0.5;
+            step: number;
+            min: number;
+        };
+        separatorSpacingUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "em";
+        };
+        color: {
+            control: "color";
+            name: string;
+            description: string;
+            defaultValue: "currentColor";
+        };
+        currentColor: {
+            control: "color";
+            name: string;
+            description: string;
+            defaultValue: "currentColor";
+        };
+        font: {
+            control: "text";
+            name: string;
+            description: string;
+            defaultValue: "inherit";
+        };
+        currentFont: {
+            control: "text";
+            name: string;
+            description: string;
+            defaultValue: "inherit";
+        };
+        separatorPartStyle: {
+            control: "text";
+            name: string;
+            description: string;
+            defaultValue: string;
+            rows: number;
+        };
+    };
+    render(args: import("@storybook/web-components").Args): HTMLDivElement;
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const CustomSeparator: Story;
+export declare const LongPath: Story;
+export declare const CustomFonts: Story;
+export declare const PartStyling: Story;
+//# sourceMappingURL=breadcrumbs.stories.d.ts.map

package/dist/breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../src/breadcrumbs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAQhE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAetB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KA8BzB,CAAC"}

package/dist/breadcrumbs.stories.js

@@ -0,0 +1,205 @@
+import { defineBreadcrumbs, Breadcrumbs } from './breadcrumbs.js';
+import { lengthUnits } from './style-values.js';
+// Define the custom element with a prefix upfront
+const tagName = defineBreadcrumbs('x'); // Use 'x' as prefix
+const meta = {
+    title: 'Components/Breadcrumbs',
+    component: tagName,
+    argTypes: {
+        separator: {
+            control: 'text',
+            name: 'separator',
+            description: 'パンくずリストの区切り文字',
+            defaultValue: Breadcrumbs.defaultSeparator,
+        },
+        separatorColor: {
+            control: 'color',
+            name: '--separator-color',
+            description: '区切り文字の色',
+            defaultValue: Breadcrumbs.defaultStyle.separatorColor,
+        },
+        separatorSpacingValue: {
+            control: 'number',
+            name: '--separator-spacing (数値)',
+            description: '区切り文字の間隔（数値部分）',
+            defaultValue: Breadcrumbs.defaultStyle.separatorSpacingValue,
+            step: 0.1,
+            min: 0,
+        },
+        separatorSpacingUnit: {
+            control: 'select',
+            name: '--separator-spacing (単位)',
+            options: lengthUnits,
+            description: '区切り文字の間隔（単位）',
+            defaultValue: Breadcrumbs.defaultStyle.separatorSpacingUnit,
+        },
+        color: {
+            control: 'color',
+            name: '--color',
+            description: 'リスト全体のデフォルト文字色',
+            defaultValue: Breadcrumbs.defaultStyle.color,
+        },
+        currentColor: {
+            control: 'color',
+            name: '--current-color',
+            description: '現在位置を示すアイテムの色',
+            defaultValue: Breadcrumbs.defaultStyle.currentColor,
+        },
+        font: {
+            control: 'text',
+            name: '--font (ショートハンド)',
+            description: '全体のフォントスタイル (例: italic bold 1.2em sans-serif)',
+            defaultValue: Breadcrumbs.defaultStyle.font,
+        },
+        currentFont: {
+            control: 'text',
+            name: '--current-font (ショートハンド)',
+            description: '現在のアイテムのフォントスタイル',
+            defaultValue: Breadcrumbs.defaultStyle.currentFont,
+        },
+        separatorPartStyle: {
+            control: 'text',
+            name: '::part(separator)',
+            description: '::part(separator) に適用するCSS（例: background: yellow; padding: 2px;）',
+            defaultValue: '',
+            rows: 5, // Make textarea taller
+        },
+    },
+    render(args) {
+        const container = document.createElement('div'); // Container for element and style
+        // Create the component instance
+        const element = document.createElement(tagName);
+        // Apply separator attribute
+        element.separator = args.separator;
+        // Apply CSS Custom Properties
+        element.style.setProperty('--separator-color', args.separatorColor);
+        element.style.setProperty('--separator-spacing', `${args.separatorSpacingValue}${args.separatorSpacingUnit}`);
+        element.style.setProperty('--color', args.color);
+        element.style.setProperty('--current-color', args.currentColor);
+        // Apply font shorthands
+        if (args.font) {
+            element.style.setProperty('--font', args.font);
+        }
+        if (args.currentFont) {
+            element.style.setProperty('--current-font', args.currentFont);
+        }
+        // Set inner HTML
+        element.innerHTML = `
+	<a href="/">ホーム</a>
+	<a href="/category">カテゴリA</a>
+	<a href="/category/subcategory/items">アイテム一覧</a>
+	<a href="/category/subcategory/items/current" aria-current="page">現在のアイテム</a>
+`;
+        container.append(element);
+        // Apply ::part styles if provided
+        if (args.separatorPartStyle && args.separatorPartStyle.trim()) {
+            const style = document.createElement('style');
+            // Scope the style to the specific instance using the tag name
+            style.textContent = `
+${tagName}::part(separator) {
+	${args.separatorPartStyle}
+}
+`;
+            container.append(style); // Append style next to the element
+        }
+        return container; // Return the container with element + style
+    },
+};
+export default meta;
+const getDefaultArgs = () => {
+    const args = {};
+    for (const [key, value] of Object.entries(meta.argTypes)) {
+        // Skip the individual value/unit controls for composite props
+        if (!key.endsWith('Value') && !key.endsWith('Unit')) {
+            args[key] = value.defaultValue;
+        }
+    }
+    return args;
+};
+const defaultArgs = getDefaultArgs();
+export const Default = {
+    args: defaultArgs,
+};
+export const CustomSeparator = {
+    args: {
+        ...defaultArgs,
+        separator: '>',
+        separatorSpacingValue: 0.8,
+        separatorSpacingUnit: 'em',
+    },
+};
+export const LongPath = {
+    args: defaultArgs,
+    render: (args) => {
+        const element = meta.render(args);
+        const breadcrumbsElement = element instanceof HTMLElement && element.tagName.toLowerCase() === tagName
+            ? element
+            : element.querySelector(tagName);
+        if (breadcrumbsElement) {
+            breadcrumbsElement.innerHTML = `
+	<a href="/">ホーム</a>
+	<a href="/category">カテゴリA</a>
+	<a href="/category/subcategory">サブカテゴリB</a>
+	<a href="/category/subcategory/subsubcategory">サブサブカテゴリC</a>
+	<a href="/category/subcategory/subsubcategory/items">アイテム一覧</a>
+	<a href="/category/subcategory/subsubcategory/items/123" aria-current="page">現在のアイテム</a>
+`;
+        }
+        return element;
+    },
+};
+// Story to demonstrate font shorthands
+export const CustomFonts = {
+    args: {
+        ...defaultArgs,
+        font: 'italic 1em "Times New Roman", serif',
+        currentFont: 'bold 1.1em Arial, sans-serif',
+        separator: '→',
+        color: '#555',
+        currentColor: 'darkred',
+    },
+    render: (args) => {
+        const element = meta.render(args);
+        const breadcrumbsElement = element instanceof HTMLElement && element.tagName.toLowerCase() === tagName
+            ? element
+            : element.querySelector(tagName);
+        if (breadcrumbsElement) {
+            breadcrumbsElement.innerHTML = `
+	<a href="/">Home (Serif)</a>
+	<a href="/products">Products (Serif)</a>
+	<a href="/products/special" aria-current="page">Special Offer (Arial Bold)</a>
+`;
+        }
+        return element;
+    },
+};
+// New story to demonstrate ::part styling
+export const PartStyling = {
+    args: {
+        ...defaultArgs,
+        separator: '::',
+        separatorPartStyle: `
+	background-color: gold;
+	border: 1px dashed red;
+	padding: 0 5px;
+	border-radius: 4px;
+	font-weight: bold;
+	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+	min-block-size: 1em;
+`,
+    },
+    render: (args) => {
+        const element = meta.render(args);
+        const breadcrumbsElement = element instanceof HTMLElement && element.tagName.toLowerCase() === tagName
+            ? element
+            : element.querySelector(tagName);
+        if (breadcrumbsElement) {
+            breadcrumbsElement.innerHTML = `
+	<a href="/">Home</a>
+	<a href="/section">Section</a>
+	<a href="/section/current" aria-current="page">Current Page</a>
+`;
+        }
+        return element;
+    },
+};

package/package.json

@@ -1,18 +1,21 @@
 {
 	"name": "@d-zero/custom-components",
-	"version": "5.0.0-alpha.45",
+	"version": "5.0.0-beta.0",
 	"description": "D-ZERO custom components",
 	"author": "D-ZERO",
 	"license": "MIT",
 	"repository": {
 		"url": "https://github.com/d-zero-dev/frontend-env.git"
 	},
-	"private": false,
 	"publishConfig": {
 		"access": "public"
 	},
 	"type": "module",
 	"exports": {
+		"./breadcrumbs": {
+			"import": "./dist/breadcrumbs.js",
+			"types": "./dist/breadcrumbs.d.ts"
+		},
 		"./hamburger-menu": {
 			"import": "./dist/hamburger-menu.js",
 			"types": "./dist/hamburger-menu.d.ts"
@@ -28,14 +31,14 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "3.2.6",
-		"@storybook/addon-essentials": "8.6.12",
-		"@storybook/blocks": "8.6.12",
-		"@storybook/experimental-addon-test": "8.6.12",
-		"@storybook/test": "8.6.12",
-		"@storybook/web-components": "8.6.12",
-		"@storybook/web-components-vite": "8.6.12",
-		"lit": "3.2.1",
-		"storybook": "8.6.12"
+		"@storybook/addon-essentials": "8.6.14",
+		"@storybook/blocks": "8.6.14",
+		"@storybook/experimental-addon-test": "8.6.14",
+		"@storybook/test": "8.6.14",
+		"@storybook/web-components": "8.6.14",
+		"@storybook/web-components-vite": "8.6.14",
+		"lit": "3.3.0",
+		"storybook": "8.6.14"
 	},
-	"gitHead": "8f9a1746509e90c061511b19f028c758754b394f"
+	"gitHead": "5cc4a9e00ee763e56923ae878704e237d9ce3705"
 }