@solid-design-system/components 1.0.0 → 1.0.1

package/dist/versioned-package/components/button/button.js

@@ -216,9 +216,9 @@ let SdButton = class extends SolidElement {
       }[this.size]
     )}>
         </slot>
-      ${this.loading ? html`<sd-1-0-0-spinner
+      ${this.loading ? html`<sd-1-0-1-spinner
               class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"
-            ></sd-1-0-0-spinner>` : ""}
+            ></sd-1-0-1-spinner>` : ""}
       </${tag}>
     `;
   }
@@ -234,7 +234,7 @@ SdButton.styles = [
         cursor: pointer;
       }
 
-      sd-1-0-0-spinner {
+      sd-1-0-1-spinner {
         --indicator-color: currentColor;
         --track-color: var(--tw-varcolor-200);
       }
@@ -253,11 +253,11 @@ SdButton.styles = [
       }
 
       /**
-       * sd-1-0-0-icons should automatically resize correctly based on the button size.
+       * sd-1-0-1-icons should automatically resize correctly based on the button size.
        */
 
-      ::slotted(sd-1-0-0-icon),
-      sd-1-0-0-spinner {
+      ::slotted(sd-1-0-1-icon),
+      sd-1-0-1-spinner {
         font-size: calc(var(--tw-varspacing) / 2);
       }
 
@@ -268,30 +268,30 @@ SdButton.styles = [
       // * buttons and we style them here instead.
       // */
 
-      // :host(.sd-1-0-0-button-group__button--first:not(.sd-1-0-0-button-group__button--last)) .button {
+      // :host(.sd-1-0-1-button-group__button--first:not(.sd-1-0-1-button-group__button--last)) .button {
       //   border-start-end-radius: 0;
       //   border-end-end-radius: 0;
       // }
 
-      // :host(.sd-1-0-0-button-group__button--inner) .button {
+      // :host(.sd-1-0-1-button-group__button--inner) .button {
       //   border-radius: 0;
       // }
 
-      // :host(.sd-1-0-0-button-group__button--last:not(.sd-1-0-0-button-group__button--first)) .button {
+      // :host(.sd-1-0-1-button-group__button--last:not(.sd-1-0-1-button-group__button--first)) .button {
       //   border-start-start-radius: 0;
       //   border-end-start-radius: 0;
       // }
 
       // /* All except the first */
-      // :host(.sd-1-0-0-button-group__button:not(.sd-1-0-0-button-group__button--first)) {
+      // :host(.sd-1-0-1-button-group__button:not(.sd-1-0-1-button-group__button--first)) {
       //   margin-inline-start: calc(-1 * var(--sd-input-border-width));
       // }
 
       // /* Add a visual separator between solid buttons */
       // :host(
-      //     .sd-1-0-0-button-group__button:not(
-      //         .sd-1-0-0-button-group__button--first,
-      //         .sd-1-0-0-button-group__button--radio,
+      //     .sd-1-0-1-button-group__button:not(
+      //         .sd-1-0-1-button-group__button--first,
+      //         .sd-1-0-1-button-group__button--radio,
       //         [variant='default']
       //       ):not(:hover)
       //   )
@@ -306,13 +306,13 @@ SdButton.styles = [
       // }
 
       // /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-      // :host(.sd-1-0-0-button-group__button--hover) {
+      // :host(.sd-1-0-1-button-group__button--hover) {
       //   z-index: 1;
       // }
 
       // /* Focus and checked are always on top */
-      // :host(.sd-1-0-0-button-group__button--focus),
-      // :host(.sd-1-0-0-button-group__button[checked]) {
+      // :host(.sd-1-0-1-button-group__button--focus),
+      // :host(.sd-1-0-1-button-group__button[checked]) {
       //   z-index: 2;
       // }
     `
@@ -321,7 +321,7 @@ __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-1-0-0-icon" })
+  queryAssignedElements({ selector: "sd-1-0-1-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -384,7 +384,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-1-0-0-button")
+  customElement("sd-1-0-1-button")
 ], SdButton);
 export {
   SdButton as default

package/dist/versioned-package/components/icon/icon.d.ts

@@ -17,6 +17,6 @@ export default class SdIcon extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-0-0-icon': SdIcon;
+        'sd-1-0-1-icon': SdIcon;
     }
 }

package/dist/versioned-package/components/icon/icon.js

@@ -1,6 +1,6 @@
 import { css, html } from "lit";
 import { state, property, customElement } from "lit/decorators.js";
-import { unwatchIcon, getIconLibrary, watchIcon } from "./library.js";
+import { watchIcon, unwatchIcon, getIconLibrary } from "./library.js";
 import { requestIcon } from "./request.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { watch } from "../../internal/watch.js";
@@ -122,7 +122,7 @@ __decorateClass([
   watch(["name", "src", "library"])
 ], SdIcon.prototype, "setIcon", 1);
 SdIcon = __decorateClass([
-  customElement("sd-1-0-0-icon")
+  customElement("sd-1-0-1-icon")
 ], SdIcon);
 export {
   SdIcon as default

package/dist/versioned-package/components/icon/library.js

@@ -10,8 +10,26 @@ function unwatchIcon(icon) {
 function getIconLibrary(name) {
   return registry.find((lib) => lib.name === name);
 }
+function registerIconLibrary(name, options) {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    resolver: options.resolver,
+    mutator: options.mutator
+  });
+  watchedIcons.forEach((icon) => {
+    if (icon.library === name) {
+      icon.setIcon();
+    }
+  });
+}
+function unregisterIconLibrary(name) {
+  registry = registry.filter((lib) => lib.name !== name);
+}
 export {
   getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary,
   unwatchIcon,
   watchIcon
 };

package/dist/versioned-package/components/include/include.d.ts

@@ -11,6 +11,6 @@ export default class SdInclude extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-0-0-include': SdInclude;
+        'sd-1-0-1-include': SdInclude;
     }
 }

package/dist/versioned-package/components/include/include.js

@@ -65,7 +65,7 @@ __decorateClass([
   watch("src")
 ], SdInclude.prototype, "handleSrcChange", 1);
 SdInclude = __decorateClass([
-  customElement("sd-1-0-0-include")
+  customElement("sd-1-0-1-include")
 ], SdInclude);
 export {
   SdInclude as default

package/dist/versioned-package/components/link/link.d.ts

@@ -17,6 +17,6 @@ export default class SdLink extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-0-0-link': SdLink;
+        'sd-1-0-1-link': SdLink;
     }
 }

package/dist/versioned-package/components/link/link.js

@@ -76,7 +76,7 @@ let SdLink = class extends SolidElement {
 };
 SdLink.styles = [
   SolidElement.styles,
-  css`::slotted(sd-1-0-0-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-0-0-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-0-0-icon){font-size:1.5rem}`
+  css`::slotted(sd-1-0-1-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-1-0-1-icon){font-size:1rem}:host([size=lg][standalone]) ::slotted(sd-1-0-1-icon){font-size:1.5rem}`
 ];
 __decorateClass([
   query("a")
@@ -100,7 +100,7 @@ __decorateClass([
   property()
 ], SdLink.prototype, "download", 2);
 SdLink = __decorateClass([
-  customElement("sd-1-0-0-link")
+  customElement("sd-1-0-1-link")
 ], SdLink);
 export {
   SdLink as default

package/dist/versioned-package/components/spinner/spinner.d.ts

@@ -7,6 +7,6 @@ export default class SdSpinner extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-0-0-spinner': SdSpinner;
+        'sd-1-0-1-spinner': SdSpinner;
     }
 }

package/dist/versioned-package/components/spinner/spinner.js

@@ -39,7 +39,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdSpinner.prototype, "color", 2);
 SdSpinner = __decorateClass([
-  customElement("sd-1-0-0-spinner")
+  customElement("sd-1-0-1-spinner")
 ], SdSpinner);
 export {
   SdSpinner as default

package/dist/versioned-package/internal/form.js

@@ -90,7 +90,7 @@ class FormControlController {
     const disabled = this.options.disabled(this.host);
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
-    const isButton = this.host.tagName.toLowerCase() === "sd-1-0-0-button";
+    const isButton = this.host.tagName.toLowerCase() === "sd-1-0-1-button";
     if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
       if (Array.isArray(value)) {
         value.forEach((val) => {

package/dist/versioned-package/solid-components.d.ts

@@ -3,4 +3,5 @@ export { default as SdIcon } from './components/icon/icon';
 export { default as SdInclude } from './components/include/include';
 export { default as SdLink } from './components/link/link';
 export { default as SdSpinner } from './components/spinner/spinner';
+export * from './utilities/icon-library';
 export * from './utilities/localize';

package/dist/versioned-package/solid-components.js

@@ -3,6 +3,7 @@ import { default as default3 } from "./components/icon/icon.js";
 import { default as default4 } from "./components/include/include.js";
 import { default as default5 } from "./components/link/link.js";
 import { default as default6 } from "./components/spinner/spinner.js";
+import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
   LocalizeController,
@@ -10,5 +11,7 @@ export {
   default3 as SdIcon,
   default4 as SdInclude,
   default5 as SdLink,
-  default6 as SdSpinner
+  default6 as SdSpinner,
+  registerIconLibrary,
+  unregisterIconLibrary
 };

package/dist/vscode.html-custom-data.json

@@ -330,7 +330,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-0-button",
+      "name": "sd-1-0-1-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -502,7 +502,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-0-icon",
+      "name": "sd-1-0-1-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.",
       "attributes": [
         {
@@ -544,7 +544,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-0-include",
+      "name": "sd-1-0-1-include",
       "description": "Includes give you the power to embed external HTML files into the page.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.",
       "attributes": [
         {
@@ -576,7 +576,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-0-link",
+      "name": "sd-1-0-1-link",
       "description": "A link component.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -636,7 +636,7 @@
       "references": []
     },
     {
-      "name": "sd-1-0-0-spinner",
+      "name": "sd-1-0-1-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n",
       "attributes": [
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -768,7 +768,7 @@
           ]
         },
         {
-          "name": "sd-1-0-0-button",
+          "name": "sd-1-0-1-button",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/button",
           "js": {
@@ -1107,7 +1107,7 @@
           ]
         },
         {
-          "name": "sd-1-0-0-icon",
+          "name": "sd-1-0-1-icon",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/icon",
           "js": {
@@ -1216,7 +1216,7 @@
           ]
         },
         {
-          "name": "sd-1-0-0-include",
+          "name": "sd-1-0-1-include",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/include",
           "js": {
@@ -1287,7 +1287,7 @@
           ]
         },
         {
-          "name": "sd-1-0-0-link",
+          "name": "sd-1-0-1-link",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/link",
           "js": {
@@ -1414,7 +1414,7 @@
           ]
         },
         {
-          "name": "sd-1-0-0-spinner",
+          "name": "sd-1-0-1-spinner",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
           "js": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solid-design-system/components",
   "description": "Solid Design System: Components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
   "author": {
     "name": "Union Investment"
@@ -66,7 +66,7 @@
     "test.watch": "web-test-runner --watch --group default",
     "storybook": "storybook dev -p 6999",
     "chromatic": "npx chromatic -b build.chromatic",
-    "postversion": "pnpm build.npm",
+    "postversion": "pnpm build.npm && node scripts/node-write-sizes.mjs",
     "release": "semantic-release  --tagFormat 'components/${version}' -e semantic-release-monorepo",
     "release.dry": "semantic-release -d --tagFormat 'components/${version}' -e semantic-release-monorepo"
   },
@@ -154,7 +154,7 @@
       [
         "@semantic-release/changelog",
         {
-          "changelogFile": "src/docs/General/changelog.mdx"
+          "changelogFile": "src/docs/General/Changelog.mdx"
         }
       ],
       [
@@ -168,7 +168,7 @@
         {
           "message": "chore(release/components): ${nextRelease.version} [skip actions]\n\n${nextRelease.notes}",
           "assets": [
-            "src/docs/General/changelog.mdx",
+            "src/docs/General/Changelog.mdx",
             "package.json"
           ]
         }
@@ -181,5 +181,11 @@
       ]
     ]
   },
-  "readme": "README.md"
+  "readme": "README.md",
+  "meta": {
+    "bundleSizeInKb": {
+      "uncompressed": 61,
+      "gzip": 18
+    }
+  }
 }

package/dist/components/es/library.js

@@ -1 +0,0 @@
-import r from"./library.system.js";let n=[r],t=[];function e(r){t.push(r)}function o(r){t=t.filter((n=>n!==r))}function a(r){return n.find((n=>n.name===r))}function i(r,e){s(r),n.push({name:r,resolver:e.resolver,mutator:e.mutator}),t.forEach((n=>{n.library===r&&n.setIcon()}))}function s(r){n=n.filter((n=>n.name!==r))}export{a as getIconLibrary,i as registerIconLibrary,s as unregisterIconLibrary,o as unwatchIcon,e as watchIcon};

package/dist/components/es/library.system.js

@@ -1 +0,0 @@
-const n={"chevron-down":'\n    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n      <path d="M20.257 6.333l-8.257 9.173-8.257-9.173c-0.181-0.181-0.431-0.292-0.707-0.292-0.552 0-1 0.448-1 1 0 0.238 0.083 0.456 0.222 0.628l-0.001-0.002 9 10c0.184 0.204 0.449 0.331 0.743 0.331s0.56-0.127 0.743-0.33l0.001-0.001 9-10c0.137-0.17 0.22-0.388 0.22-0.626 0-0.552-0.448-1-1-1-0.276 0-0.526 0.112-0.707 0.293v0z"></path>\n    </svg>\n  ',"chevron-up":'\n    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n      <path d="M12.743 6.333c-0.188-0.195-0.452-0.316-0.743-0.316s-0.555 0.121-0.743 0.315l-0 0-9 10c-0.137 0.17-0.22 0.388-0.22 0.626 0 0.552 0.448 1 1 1 0.276 0 0.526-0.112 0.707-0.293v0l8.257-9.173 8.257 9.173c0.181 0.181 0.431 0.292 0.707 0.292 0.552 0 1-0.448 1-1 0-0.238-0.083-0.456-0.222-0.628l0.001 0.002z"></path>\n    </svg>\n  '},s={name:"system",resolver:s=>s in n?`data:image/svg+xml,${encodeURIComponent(n[s])}`:"",mutator:n=>n.setAttribute("fill","currentColor")};export{s as default,n as icons};

package/dist/versioned-components/es/library.js

@@ -1 +0,0 @@
-import r from"./library.system.js";let n=[r],t=[];function e(r){t.push(r)}function o(r){t=t.filter((n=>n!==r))}function a(r){return n.find((n=>n.name===r))}function i(r,e){s(r),n.push({name:r,resolver:e.resolver,mutator:e.mutator}),t.forEach((n=>{n.library===r&&n.setIcon()}))}function s(r){n=n.filter((n=>n.name!==r))}export{a as getIconLibrary,i as registerIconLibrary,s as unregisterIconLibrary,o as unwatchIcon,e as watchIcon};

package/dist/versioned-components/es/library.system.js

@@ -1 +0,0 @@
-const n={"chevron-down":'\n    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n      <path d="M20.257 6.333l-8.257 9.173-8.257-9.173c-0.181-0.181-0.431-0.292-0.707-0.292-0.552 0-1 0.448-1 1 0 0.238 0.083 0.456 0.222 0.628l-0.001-0.002 9 10c0.184 0.204 0.449 0.331 0.743 0.331s0.56-0.127 0.743-0.33l0.001-0.001 9-10c0.137-0.17 0.22-0.388 0.22-0.626 0-0.552-0.448-1-1-1-0.276 0-0.526 0.112-0.707 0.293v0z"></path>\n    </svg>\n  ',"chevron-up":'\n    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n      <path d="M12.743 6.333c-0.188-0.195-0.452-0.316-0.743-0.316s-0.555 0.121-0.743 0.315l-0 0-9 10c-0.137 0.17-0.22 0.388-0.22 0.626 0 0.552 0.448 1 1 1 0.276 0 0.526-0.112 0.707-0.293v0l8.257-9.173 8.257 9.173c0.181 0.181 0.431 0.292 0.707 0.292 0.552 0 1-0.448 1-1 0-0.238-0.083-0.456-0.222-0.628l0.001 0.002z"></path>\n    </svg>\n  '},s={name:"system",resolver:s=>s in n?`data:image/svg+xml,${encodeURIComponent(n[s])}`:"",mutator:n=>n.setAttribute("fill","currentColor")};export{s as default,n as icons};