@public-ui/hydrate 1.7.4 → 1.7.5

package/dist/index.js

@@ -7810,7 +7810,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.4
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.5
 		`, {
       forceLog: true,
     });
@@ -10151,6 +10151,9 @@ class KolAccordion {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.nonce = nonce();
+    this.catchRef = (ref) => {
+      propagateFocus(this.host, ref);
+    };
     this.onClick = (event) => {
       this._open = !this._open;
       setTimeout(() => {
@@ -10174,7 +10177,7 @@ class KolAccordion {
     return (hAsync(Host, null, hAsync("div", { class: {
         accordion: true,
         open: this.state._open === true,
-      } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "header" }, hAsync("slot", { name: "header" })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { name: "content" }), " ", hAsync("slot", null)))))));
+      } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "header" }, hAsync("slot", { name: "header" })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { name: "content" }), " ", hAsync("slot", null)))))));
   }
   validateHeading(value) {
     this.validateLabel(value);
@@ -10199,6 +10202,7 @@ class KolAccordion {
     this.validateOn(this._on);
     this.validateOpen(this._open);
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "_heading": ["validateHeading"],
     "_label": ["validateLabel"],
@@ -11298,8 +11302,7 @@ class KolButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._ariaControls = undefined;
@@ -11420,8 +11423,7 @@ class KolButtonLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._ariaControls = undefined;
@@ -12318,6 +12320,10 @@ const defaultStyleCss$z = "/*!@:host*/.sc-kol-details-default-h{--a11y-min-size:
 class KolDetails {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.catchRef = (ref) => {
+      this.summaryElement = ref;
+      propagateFocus(this.host, this.summaryElement);
+    };
     this.handleToggle = (event) => {
       clearTimeout(this.toggleTimeout);
       this.toggleTimeout = setTimeout(() => {
@@ -12344,7 +12350,7 @@ class KolDetails {
   render() {
     return (hAsync(Host, null, hAsync("details", { ref: (el) => {
         this.detailsElement = el;
-      }, onToggle: this.handleToggle }, hAsync("summary", { ref: (element) => (this.summaryElement = element) }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+      }, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchRef }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -12695,7 +12701,7 @@ function validateLoading(component, value) {
   watchValidator(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);
 }
 
-const defaultStyleCss$w = "/*!@img*/img.sc-kol-image-default{max-height:100%;max-width:100%}";
+const defaultStyleCss$w = "/*!@:host*/.sc-kol-image-default-h{display:inline-block}/*!@img*/img.sc-kol-image-default{max-height:100%;max-width:100%}";
 
 class KolImage {
   constructor(hostRef) {
@@ -13304,13 +13310,12 @@ class KolInputCheckbox {
         [this.state._variant]: true,
         'hide-label': !!this.state._hideLabel,
         checked: this.state._checked,
-      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
+      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' && !this.state._disabled ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -15369,8 +15374,7 @@ class KolInputRadio {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -16236,8 +16240,7 @@ class KolLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._ariaControls = undefined;
     this._ariaCurrent = undefined;
@@ -16312,8 +16315,7 @@ class KolLinkButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._ariaControls = undefined;
     this._ariaCurrent = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "1.7.4",
+    "@public-ui/components": "1.7.5",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "1.7.4"
+    "@public-ui/components": "1.7.5"
   },
   "sideEffects": false,
   "type": "commonjs",