@public-ui/hydrate 2.0.0-rc.7 → 2.0.0-rc.8

package/dist/index.js

@@ -7850,7 +7850,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.7
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.8
 		`, {
       forceLog: true,
     });
@@ -10160,6 +10160,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(() => {
@@ -10182,7 +10185,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: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, 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: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -10204,6 +10207,7 @@ class KolAccordion {
     this.validateOn(this._on);
     this.validateOpen(this._open);
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "_label": ["validateLabel"],
     "_level": ["validateLevel"],
@@ -11274,8 +11278,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;
@@ -11386,8 +11389,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;
@@ -12197,6 +12199,10 @@ const defaultStyleCss$y = "@layer kol-global {\n\t\n\t.sc-kol-details-default-h
 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(() => {
@@ -12222,7 +12228,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) }, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), 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 }, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), 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);
@@ -12498,7 +12504,7 @@ function validateLoading(component, value) {
   watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
 }
 
-const defaultStyleCss$v = "@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
+const defaultStyleCss$v = "@layer kol-component {\n\t.sc-kol-image-default-h {\n\t\tdisplay: inline-block;\n\t}\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
 
 class KolImage {
   constructor(hostRef) {
@@ -13094,13 +13100,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, _accessKey: this.state._accessKey, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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, _accessKey: this.state._accessKey, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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;
@@ -15058,8 +15063,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;
@@ -15830,8 +15834,7 @@ class KolLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._download = undefined;
@@ -15884,8 +15887,7 @@ class KolLinkButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._customClass = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.0.0-rc.7",
+  "version": "2.0.0-rc.8",
   "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": "2.0.0-rc.7",
+    "@public-ui/components": "2.0.0-rc.8",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.7"
+    "@public-ui/components": "2.0.0-rc.8"
   },
   "sideEffects": false,
   "type": "commonjs",