@jsfour/root-ui 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+exports.RootButtonSize = void 0;
+(function (RootButtonSize) {
+    RootButtonSize["SMALL"] = "small";
+    RootButtonSize["LARGE"] = "large";
+})(exports.RootButtonSize || (exports.RootButtonSize = {}));
+
+exports.RootButtonType = void 0;
+(function (RootButtonType) {
+    RootButtonType["BUTTON"] = "button";
+    RootButtonType["SUBMIT"] = "submit";
+    RootButtonType["RESET"] = "reset";
+})(exports.RootButtonType || (exports.RootButtonType = {}));
+
+exports.RootButtonVariation = void 0;
+(function (RootButtonVariation) {
+    RootButtonVariation["PRIMARY"] = "primary";
+    RootButtonVariation["SECONDARY"] = "secondary";
+    RootButtonVariation["TERTIARY"] = "tertiary";
+    RootButtonVariation["OUTLINE"] = "outline";
+    RootButtonVariation["SUBMIT"] = "submit";
+    RootButtonVariation["DANGER"] = "danger";
+    RootButtonVariation["CANCEL"] = "cancel";
+})(exports.RootButtonVariation || (exports.RootButtonVariation = {}));

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-CbJkKnHq.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["root-badge_6.cjs",[[257,"root-badge",{"badgeId":[1,"badge-id"],"variation":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[257,"root-banner",{"bannerId":[1,"banner-id"],"variation":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[1,"root-breadcrumbs",{"breadcrumbsId":[1,"breadcrumbs-id"],"linkItems":[32]}],[257,"root-button",{"buttonId":[1,"button-id"],"size":[1],"variation":[1],"type":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[257,"root-input",{"inputId":[1,"input-id"],"type":[1],"label":[1],"inputName":[1,"input-name"],"placeholder":[1],"value":[1025],"maxlength":[2],"fullWidth":[4,"full-width"],"multiline":[4],"icon":[4],"showPassword":[32],"inputValue":[32],"error":[32],"touched":[32],"hasIcon":[32],"fileLabel":[32]},null,{"value":[{"onValueChanged":0}]}],[257,"root-list",{"type":[1]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/root-badge_6.cjs.entry.js

@@ -0,0 +1,343 @@
+'use strict';
+
+var index = require('./index-CbJkKnHq.js');
+var index$1 = require('./index.cjs.js');
+
+const ids = [];
+function randomIdGenerator(prefix = 'root') {
+    let id = `${prefix}-${Math.random().toString(36).substring(2, 7)}`;
+    while (ids.includes(id))
+        id = `${prefix}-${Math.random().toString(36).substring(2, 7)}`;
+    return id;
+}
+
+var RootBadgeVariation;
+(function (RootBadgeVariation) {
+    RootBadgeVariation["PRIMARY"] = "primary";
+    RootBadgeVariation["SECONDARY"] = "secondary";
+    RootBadgeVariation["TERTIARY"] = "tertiary";
+    RootBadgeVariation["OUTLINE"] = "outline";
+    RootBadgeVariation["MUTED"] = "muted";
+    RootBadgeVariation["DANGER"] = "danger";
+})(RootBadgeVariation || (RootBadgeVariation = {}));
+
+const badgeCss = () => `.root-badge{display:inline-block;color:var(--rootsdk-text-primary);font-size:0.625rem;line-height:1;border-radius:1rem;padding:0.53125rem 0.75rem 0.5rem;min-width:1.5rem;text-transform:uppercase;font-weight:bold;background-color:transparent;text-align:center}.root-badge--primary{background-color:var(--rootsdk-brand-primary);color:var(--rootsdk-text-white)}.root-badge--secondary{background-color:var(--rootsdk-brand-secondary);color:var(--rootsdk-input)}.root-badge--tertiary{background-color:var(--rootsdk-brand-tertiary);color:var(--rootsdk-input)}.root-badge--danger{background-color:var(--rootsdk-error);color:var(--rootsdk-text-white)}.root-badge--outline{background:transparent;border:var(--border-width-m) solid var(--rootsdk-text-tertiary);color:var(--rootsdk-text-primary)}.root-badge--muted{background-color:var(--rootsdk-muted);color:var(--rootsdk-text-white)}.root-badge--standard{background:var(--rootsdk-text-primary);color:var(--rootsdk-background-tertiary)}.root-badge--full-width{width:100%}`;
+
+const RootBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rootBadgeClick = index.createEvent(this, "rootBadgeClick");
+        this.badgeId = randomIdGenerator('root-badge');
+        this.variation = RootBadgeVariation.PRIMARY;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootBadgeClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-badge': true,
+            [`root-badge--${this.variation}`]: !!this.variation,
+            'root-badge--full-width': this.fullWidth,
+        };
+        return (index.h("span", { key: 'a1e7f7cee5b6899eec5d60f5acf5a8217777a6b3', id: this.badgeId, class: classes, onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: '980ad3e760b2a1d6e9e2826d48deb88390752898' })));
+    }
+};
+RootBadge.style = badgeCss();
+
+var RootBannerVariation;
+(function (RootBannerVariation) {
+    RootBannerVariation["PRIMARY"] = "primary";
+    RootBannerVariation["SECONDARY"] = "secondary";
+    RootBannerVariation["TERTIARY"] = "tertiary";
+    RootBannerVariation["DANGER"] = "danger";
+    RootBannerVariation["WARNING"] = "warning";
+    RootBannerVariation["SUCCESS"] = "success";
+})(RootBannerVariation || (RootBannerVariation = {}));
+
+const bannerCss = () => `.root-banner{text-align:center;color:var(--rootsdk-text-primary);padding:0.4rem}.root-banner--primary{background-color:var(--rootsdk-brand-primary);color:var(--rootsdk-text-white)}.root-banner--danger{background-color:var(--rootsdk-error)}.root-banner--warning{background-color:var(--rootsdk-warning)}.root-banner--success{background-color:var(--rootsdk-brand-tertiary)}`;
+
+const RootBanner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rootBannerClick = index.createEvent(this, "rootBannerClick");
+        this.bannerId = randomIdGenerator('root-banner');
+        this.variation = RootBannerVariation.PRIMARY;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootBannerClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-banner': true,
+            [`root-banner--${this.variation}`]: !!this.variation
+        };
+        return (index.h("div", { key: '96197510d7a0988a356be8a6bdddf637e5383870', id: this.bannerId, class: classes, onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'b17c26ca99e7f3575c9d2849c644e0fef1e30dff' })));
+    }
+};
+RootBanner.style = bannerCss();
+
+const breadcrumbsCss = () => `.root-breadcrumbs{display:flex;list-style:none;margin:0;padding:0;gap:0.5rem;align-items:center}.root-breadcrumbs .root-breadcrumbs-item{display:flex;align-items:center}.root-breadcrumbs .root-breadcrumbs-item:not(:last-child)::after{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>') center;content:" ";display:inline-block;filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);height:0.5rem;margin:0 0.5rem;opacity:0.5;width:0.5rem}.root-breadcrumbs .root-breadcrumbs-item--active span{background:var(--rootsdk-highlight-normal);color:var(--rootsdk-text-tertiary);border-radius:1.5rem;padding:0.32rem 0.64rem;font-size:0.8rem}.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link{text-decoration:underline;cursor:pointer;color:var(--rootsdk-text-primary);padding:0.32rem 0.64rem;border-radius:1.5rem;transition-duration:200ms;transition-property:background, color;font-size:0.8rem}.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link .root-icon{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.root-breadcrumbs .root-breadcrumbs-item .root-breadcrumbs-link:hover{background-color:var(--rootsdk-highlight-normal)}`;
+
+const RootBreadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.linkClick = index.createEvent(this, "linkClick");
+        this.breadcrumbsId = randomIdGenerator('root-breadcrumbs');
+        this.linkItems = [];
+    }
+    componentDidLoad() {
+        this.getBreadcrumbs();
+    }
+    getBreadcrumbs() {
+        const elements = this.hostElement.children;
+        if (!elements || (elements === null || elements === void 0 ? void 0 : elements.length) <= 0) {
+            console.warn(`The slot contains no link elements.`, this.hostElement);
+            return;
+        }
+        this.linkItems = [...elements]
+            .filter((element) => element.tagName.toLowerCase() === 'a')
+            .map((element) => {
+            return {
+                text: element.textContent,
+                href: element.getAttribute('href') || ''
+            };
+        });
+    }
+    clickHandler(e) {
+        this.linkClick.emit(e);
+    }
+    render() {
+        return (index.h("ol", { key: 'ffa88751925c0a1f19acb06854bd4add08edec4f', class: 'root-breadcrumbs', id: this.breadcrumbsId }, this.linkItems.map((item, index$1) => {
+            const isLast = index$1 === this.linkItems.length - 1;
+            return (index.h("li", { class: { 'root-breadcrumbs-item': true, 'root-breadcrumbs-item--active': isLast } }, isLast ? (index.h("span", null, item.text)) : (index.h("a", { class: "root-breadcrumbs-link", onClick: (e) => this.clickHandler(e), href: item.href }, item.text))));
+        })));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+RootBreadcrumbs.style = breadcrumbsCss();
+
+const buttonCss = () => `.root-button{height:2rem;border-radius:1.5rem;padding:0 1.75rem;min-width:fit-content;background-color:transparent;color:var(--rootsdk-text-primary);outline:none;font-size:1rem;border:none;cursor:pointer;border:1px solid transparent;text-transform:capitalize}.root-button--submit{background:var(--rootsdk-text-primary);color:var(--rootsdk-background-tertiary)}.root-button--danger{background:var(--rootsdk-error);color:var(--rootsdk-text-white)}.root-button--primary{background:var(--rootsdk-brand-primary);color:var(--rootsdk-text-white)}.root-button--secondary{background:var(--rootsdk-brand-secondary);color:var(--rootsdk-input)}.root-button--tertiary{background:var(--rootsdk-brand-tertiary);color:var(--rootsdk-input)}.root-button--outline{background:transparent;border:0.0625rem solid var(--rootsdk-text-tertiary);color:var(--rootsdk-text-primary)}.root-button--cancel{background:transparent;border:0.0625rem solid var(--rootsdk-text-tertiary);color:var(--rootsdk-text-primary)}.root-button--large{height:3.25rem}.root-button[disabled]{opacity:0.6;cursor:not-allowed;pointer-events:none}.root-button--full-width{width:100%}.root-button:hover{opacity:80%}.root-button:active{transform:scale(0.98)}`;
+
+const RootButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rootButtonClick = index.createEvent(this, "rootButtonClick");
+        this.buttonId = randomIdGenerator('root-button');
+        this.size = index$1.RootButtonSize.SMALL;
+        this.variation = index$1.RootButtonVariation.PRIMARY;
+        this.type = index$1.RootButtonType.BUTTON;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootButtonClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-button': true,
+            [`root-button--${this.size}`]: !!this.size,
+            [`root-button--${this.variation}`]: !!this.variation,
+            'root-button--full-width': this.fullWidth,
+        };
+        return (index.h("button", { key: '951b963255c7eab4f286758ff133e9bad9969ee3', id: this.buttonId, class: classes, disabled: this.disabled, type: this.type, onClick: (e) => this.clickHandler(e) }, index.h("slot", { key: 'f50823d7bcfd0b291fbeddb17e8a5d740b7edb2a' })));
+    }
+};
+RootButton.style = buttonCss();
+
+var RootInputType;
+(function (RootInputType) {
+    RootInputType["COLOR"] = "color";
+    RootInputType["DATE"] = "date";
+    RootInputType["EMAIL"] = "email";
+    RootInputType["FILE"] = "file";
+    RootInputType["IMAGE"] = "image";
+    RootInputType["MONTH"] = "month";
+    RootInputType["NUMBER"] = "number";
+    RootInputType["PASSWORD"] = "password";
+    RootInputType["SEARCH"] = "search";
+    RootInputType["SUBMIT"] = "submit";
+    RootInputType["TEL"] = "tel";
+    RootInputType["TEXT"] = "text";
+    RootInputType["TIME"] = "time";
+    RootInputType["URL"] = "url";
+    RootInputType["WEEK"] = "week";
+})(RootInputType || (RootInputType = {}));
+
+const inputCss = () => `.root-input--full-width{width:100%}.root-input .root-input-field{display:flex;align-items:center;width:100%;border-radius:0.75rem;background-color:var(--rootsdk-input);border:0.03125rem solid var(--rootsdk-highlight-normal);color:var(--rootsdk-text-primary);min-height:2em;outline:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;cursor:text}.root-input .root-input-field.root-input-field--textarea{align-items:flex-start}.root-input .root-input-field.root-input-field--file{position:relative;cursor:pointer}.root-input .root-input-field.root-input-field--color{position:relative;cursor:pointer}.root-input .root-input-field:focus-within{border:0.03125rem solid var(--rootsdk-brand-primary)}.root-input .root-input-field.root-input-field--error{border-color:var(--rootsdk-error, #e53935)}.root-input .root-input-icon{margin-right:0.5rem;display:flex;align-items:center;justify-content:center;height:1em}.root-input input{flex:1;border:none;background:transparent;color:inherit;font-family:inherit;outline:none;padding:0;margin:0;text-overflow:ellipsis;cursor:text}.root-input input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.root-input input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}.root-input input::-webkit-calendar-picker-indicator{display:none}.root-input input::-webkit-outer-spin-button,.root-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.root-input textarea{flex:1;border:none;background:transparent;color:inherit;font-family:inherit;outline:none;padding:0;margin:0;resize:vertical;min-height:6rem}.root-input .root-input-number-controls{display:flex;flex-direction:column;gap:0;margin-left:0;margin-right:0.5rem;height:1em;line-height:0.5;align-items:center;justify-content:center;cursor:pointer}.root-input .root-input-file-label{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;pointer-events:none}.root-input .root-input-color-label{display:flex;align-items:center;gap:0.5rem;width:100%;pointer-events:none}.root-input .root-input-color-swatch{width:1rem;height:1rem;border-radius:4px;border:0.03125rem solid var(--rootsdk-highlight-normal)}.root-input .root-input-color-text{font-family:inherit;color:inherit}.root-input label{font-size:0.875rem;color:var(--rootsdk-text-tertiary);text-transform:capitalize;margin-bottom:0.5rem;display:block}.root-input .root-input-error{margin-top:0.35rem;color:var(--rootsdk-error, #e53935);font-size:0.75rem}`;
+
+const RootInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rootInputChange = index.createEvent(this, "rootInputChange");
+        this.rootInputBlur = index.createEvent(this, "rootInputBlur");
+        this.inputId = randomIdGenerator('root-input');
+        this.type = RootInputType.TEXT;
+        this.placeholder = '';
+        this.value = '';
+        this.fullWidth = false;
+        this.multiline = false;
+        this.icon = true;
+        this.showPassword = false;
+        this.inputValue = '';
+        this.error = '';
+        this.touched = false;
+        this.hasIcon = false;
+        this.fileLabel = 'Select file';
+        this.openPicker = () => {
+            if (!this.inputRef)
+                return;
+            const el = this.inputRef;
+            if (el instanceof HTMLInputElement && el.showPicker) {
+                el.showPicker();
+            }
+            else {
+                el.focus();
+                if (el instanceof HTMLInputElement) {
+                    el.click();
+                }
+            }
+        };
+        this.togglePasswordVisibility = () => {
+            this.showPassword = !this.showPassword;
+        };
+        this.incrementNumber = () => {
+            if (this.inputRef instanceof HTMLInputElement) {
+                this.inputRef.stepUp();
+                this.inputValue = this.inputRef.value;
+                this.rootInputChange.emit(this.inputValue);
+            }
+        };
+        this.decrementNumber = () => {
+            if (this.inputRef instanceof HTMLInputElement) {
+                this.inputRef.stepDown();
+                this.inputValue = this.inputRef.value;
+                this.rootInputChange.emit(this.inputValue);
+            }
+        };
+        this.validate = (val) => {
+            if (!val)
+                return '';
+            if (this.type === RootInputType.EMAIL) {
+                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                return emailRegex.test(val) ? '' : 'Please enter a valid email address.';
+            }
+            if (this.type === RootInputType.TEL) {
+                const phoneRegex = /^[+]?[- 0-9()]{7,}$/;
+                return phoneRegex.test(val) ? '' : 'Please enter a valid phone number.';
+            }
+            return '';
+        };
+        this.handleBlur = (e) => {
+            this.touched = true;
+            this.error = this.validate(this.inputValue);
+            this.rootInputBlur.emit(e);
+        };
+        this.handleChange = (e) => {
+            const target = e.target;
+            const nextValue = target.value;
+            this.inputValue = nextValue;
+            this.rootInputChange.emit(nextValue);
+            if (this.touched) {
+                this.error = this.validate(nextValue);
+            }
+        };
+        this.handleFileChange = (e) => {
+            var _a;
+            const target = e.target;
+            const file = (_a = target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                this.fileLabel = file.name;
+            }
+            else {
+                this.fileLabel = 'Select file';
+            }
+            this.rootInputChange.emit(target.value);
+        };
+        this.handleFieldClick = () => {
+            if (!this.inputRef)
+                return;
+            if (this.multiline) {
+                this.inputRef.focus();
+                return;
+            }
+            if (this.inputRef instanceof HTMLInputElement) {
+                if (this.inputRef.type === 'color') {
+                    this.inputRef.click();
+                    return;
+                }
+                if (this.inputRef.type !== 'date') {
+                    this.inputRef.focus();
+                }
+            }
+        };
+    }
+    onValueChanged(newValue) {
+        this.inputValue = newValue;
+    }
+    componentWillLoad() {
+        this.setHasIcon();
+        this.inputValue = this.value;
+    }
+    setHasIcon() {
+        const icon = !!this.hostElement.querySelector('[slot="icon"]');
+        if (icon) {
+            this.hasIcon = icon;
+        }
+    }
+    render() {
+        const inputType = this.type === RootInputType.PASSWORD
+            ? (this.showPassword ? 'text' : 'password')
+            : this.type;
+        const colorValue = this.type === RootInputType.COLOR
+            ? (this.inputValue || '#000000')
+            : this.inputValue;
+        const classes = {
+            'root-input': true,
+            'root-input--full-width': this.fullWidth,
+        };
+        const fieldClasses = {
+            'root-input-field': true,
+            'root-input-field--error': !!this.error,
+            'root-input-field--file': this.type === RootInputType.FILE,
+            'root-input-field--color': this.type === RootInputType.COLOR,
+            'root-input-field--textarea': this.multiline,
+        };
+        return (index.h("div", { key: 'f0cfdfa2a787ca3d24467aa14bed615f003669a3', class: classes }, index.h("label", { key: 'efdc7aa0e6b58ea500d2496c2536c1ed8e1baaeb', htmlFor: this.inputId }, this.label), index.h("div", { key: '2aeb9c360647154827070708b7ffa5a9c43b48d6', class: fieldClasses, onClick: this.handleFieldClick }, this.hasIcon && (index.h("div", { key: '8d48d017c77409a49b23c31af4e8010784f7282b', class: "root-input-icon", onClick: this.openPicker }, index.h("slot", { key: '063c38a33aefd8b6cb3120a35f45600e998c93fa', name: "icon" }))), this.multiline ? (index.h("textarea", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, value: this.inputValue, onBlur: this.handleBlur, onInput: this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false', rows: 3 })) : (index.h("input", { ref: (el) => this.inputRef = el, placeholder: this.placeholder, id: this.inputId, name: this.inputName, maxLength: this.maxlength, type: inputType, value: colorValue, onBlur: this.handleBlur, onInput: this.type === RootInputType.FILE ? this.handleFileChange : this.handleChange, "aria-invalid": !!this.error ? 'true' : 'false' })), this.type === RootInputType.COLOR && (index.h("div", { key: '7deca8ea931a30fbcfa02cfc7232266a5d04bd6e', class: "root-input-color-label" }, index.h("span", { key: '03ea754ebde8113944d7a3ca84dc14fb606bed62', class: "root-input-color-swatch", style: { backgroundColor: colorValue } }), index.h("span", { key: '912f3e9a93f8c6a5e775b2ba7d5ddcb6976fe288', class: "root-input-color-text" }, colorValue))), this.type === RootInputType.FILE && !this.multiline && (index.h("div", { key: 'fe5ebf39d54b21740d1ff7e18c8ca28633d894a3', class: "root-input-file-label" }, index.h("span", { key: 'dab576c2c1ba5b0d8f38cd0a981aa90848a8de58' }, this.fileLabel), index.h("slot", { key: '4a7469093cb502a4596164a39f7e6ba9a2e45f26', name: "file-icon" }))), this.type === RootInputType.PASSWORD && !this.multiline && (index.h("div", { key: 'fd783cd0384fd5efd9c12e967bfd990281f9f1aa', class: "root-input-icon", onClick: this.togglePasswordVisibility }, index.h("slot", { key: '242f5399701370494f5f81d41cc40478136871e0', name: "password-icon" }))), this.type === RootInputType.NUMBER && !this.multiline && (index.h("div", { key: 'f6fa71e43701933280c41f60a27c6e3f923e3670', class: "root-input-number-controls" }, index.h("div", { key: '04d2f6d6e152c0c6326c0e9f38b78f6c15ea3626', class: "root-input-icon", onClick: this.incrementNumber }, index.h("slot", { key: '8de93b51aba6b7f220653c39d8a0e1ba234a15ed', name: "number-up-icon" })), index.h("div", { key: '2baf375834a3926b36d818f563e4fcf545a4146b', class: "root-input-icon", onClick: this.decrementNumber }, index.h("slot", { key: 'f4a7772d01d7d78e7a675ae34cee3ae76c92cdce', name: "number-down-icon" }))))), this.error && this.touched && (index.h("div", { key: 'e0d328cc5154baf82963af89a37e70676df94ee2', class: "root-input-error" }, this.error))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }]
+    }; }
+};
+RootInput.style = inputCss();
+
+const listCss = () => `.root-list{margin:0;padding-left:1.5rem;color:var(--rootsdk-text-primary);font-size:1rem;line-height:1.6;list-style-position:inside}.root-list--bullet{list-style-type:disc}.root-list--numbered{list-style-type:decimal}.root-list li{margin-bottom:0.5rem;padding-left:0.25rem}`;
+
+const RootList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The type of list: bullet or numbered
+         */
+        this.type = 'bullet';
+    }
+    render() {
+        const isNumbered = this.type === 'numbered';
+        const Tag = isNumbered ? 'ol' : 'ul';
+        return (index.h(Tag, { key: '315491245470e4eb4601debdfbdfeebec6ec0862', class: { 'root-list': true, [`root-list--${this.type}`]: true } }, index.h("slot", { key: '630f9ab955f57568bd6c8686068afc6593a66185' })));
+    }
+};
+RootList.style = listCss();
+
+exports.root_badge = RootBadge;
+exports.root_banner = RootBanner;
+exports.root_breadcrumbs = RootBreadcrumbs;
+exports.root_button = RootButton;
+exports.root_input = RootInput;
+exports.root_list = RootList;

package/dist/cjs/stencil-library.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-CbJkKnHq.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.1 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('stencil-library.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["root-badge_6.cjs",[[257,"root-badge",{"badgeId":[1,"badge-id"],"variation":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[257,"root-banner",{"bannerId":[1,"banner-id"],"variation":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[1,"root-breadcrumbs",{"breadcrumbsId":[1,"breadcrumbs-id"],"linkItems":[32]}],[257,"root-button",{"buttonId":[1,"button-id"],"size":[1],"variation":[1],"type":[1],"fullWidth":[4,"full-width"],"disabled":[4]}],[257,"root-input",{"inputId":[1,"input-id"],"type":[1],"label":[1],"inputName":[1,"input-name"],"placeholder":[1],"value":[1025],"maxlength":[2],"fullWidth":[4,"full-width"],"multiline":[4],"icon":[4],"showPassword":[32],"inputValue":[32],"error":[32],"touched":[32],"hasIcon":[32],"fileLabel":[32]},null,{"value":[{"onValueChanged":0}]}],[257,"root-list",{"type":[1]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,17 @@
+{
+  "entries": [
+    "components/button/button.js",
+    "components/badge/badge.js",
+    "components/banner/banner.js",
+    "components/breadcrumbs/breadcrumbs.js",
+    "components/input/input.js",
+    "components/list/list.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/badge/badge-variation.enum.js

@@ -0,0 +1,9 @@
+export var RootBadgeVariation;
+(function (RootBadgeVariation) {
+    RootBadgeVariation["PRIMARY"] = "primary";
+    RootBadgeVariation["SECONDARY"] = "secondary";
+    RootBadgeVariation["TERTIARY"] = "tertiary";
+    RootBadgeVariation["OUTLINE"] = "outline";
+    RootBadgeVariation["MUTED"] = "muted";
+    RootBadgeVariation["DANGER"] = "danger";
+})(RootBadgeVariation || (RootBadgeVariation = {}));

package/dist/collection/components/badge/badge.css

@@ -0,0 +1,45 @@
+.root-badge {
+  display: inline-block;
+  color: var(--rootsdk-text-primary);
+  font-size: 0.625rem;
+  line-height: 1;
+  border-radius: 1rem;
+  padding: 0.53125rem 0.75rem 0.5rem;
+  min-width: 1.5rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background-color: transparent;
+  text-align: center;
+}
+.root-badge--primary {
+  background-color: var(--rootsdk-brand-primary);
+  color: var(--rootsdk-text-white);
+}
+.root-badge--secondary {
+  background-color: var(--rootsdk-brand-secondary);
+  color: var(--rootsdk-input);
+}
+.root-badge--tertiary {
+  background-color: var(--rootsdk-brand-tertiary);
+  color: var(--rootsdk-input);
+}
+.root-badge--danger {
+  background-color: var(--rootsdk-error);
+  color: var(--rootsdk-text-white);
+}
+.root-badge--outline {
+  background: transparent;
+  border: var(--border-width-m) solid var(--rootsdk-text-tertiary);
+  color: var(--rootsdk-text-primary);
+}
+.root-badge--muted {
+  background-color: var(--rootsdk-muted);
+  color: var(--rootsdk-text-white);
+}
+.root-badge--standard {
+  background: var(--rootsdk-text-primary);
+  color: var(--rootsdk-background-tertiary);
+}
+.root-badge--full-width {
+  width: 100%;
+}

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,148 @@
+import { h } from "@stencil/core";
+import { randomIdGenerator } from "../../global/utils/randomIdGenerator";
+import { RootBadgeVariation } from "./badge-variation.enum";
+export class RootBadge {
+    constructor() {
+        this.badgeId = randomIdGenerator('root-badge');
+        this.variation = RootBadgeVariation.PRIMARY;
+        this.fullWidth = false;
+        this.disabled = false;
+    }
+    clickHandler(e) {
+        this.rootBadgeClick.emit(e);
+    }
+    render() {
+        const classes = {
+            'root-badge': true,
+            [`root-badge--${this.variation}`]: !!this.variation,
+            'root-badge--full-width': this.fullWidth,
+        };
+        return (h("span", { key: 'a1e7f7cee5b6899eec5d60f5acf5a8217777a6b3', id: this.badgeId, class: classes, onClick: (e) => this.clickHandler(e) }, h("slot", { key: '980ad3e760b2a1d6e9e2826d48deb88390752898' })));
+    }
+    static get is() { return "root-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "badgeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-id",
+                "defaultValue": "randomIdGenerator('root-badge')"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RootBadgeVariation",
+                    "resolved": "RootBadgeVariation.DANGER | RootBadgeVariation.MUTED | RootBadgeVariation.OUTLINE | RootBadgeVariation.PRIMARY | RootBadgeVariation.SECONDARY | RootBadgeVariation.TERTIARY",
+                    "references": {
+                        "RootBadgeVariation": {
+                            "location": "import",
+                            "path": "./badge-variation.enum",
+                            "id": "src/components/badge/badge-variation.enum.ts::RootBadgeVariation",
+                            "referenceLocation": "RootBadgeVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variation",
+                "defaultValue": "RootBadgeVariation.PRIMARY"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rootBadgeClick",
+                "name": "rootBadgeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/banner/banner-variation.enum.js

@@ -0,0 +1,9 @@
+export var RootBannerVariation;
+(function (RootBannerVariation) {
+    RootBannerVariation["PRIMARY"] = "primary";
+    RootBannerVariation["SECONDARY"] = "secondary";
+    RootBannerVariation["TERTIARY"] = "tertiary";
+    RootBannerVariation["DANGER"] = "danger";
+    RootBannerVariation["WARNING"] = "warning";
+    RootBannerVariation["SUCCESS"] = "success";
+})(RootBannerVariation || (RootBannerVariation = {}));