@public-ui/hydrate 3.0.6 → 3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +25 -14
  2. package/dist/index.mjs +25 -14
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
146
146
 
147
147
  const NAMESPACE = 'kolibri';
148
148
  const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, updatable: true};
149
- const Env = /* kolibri */ {"kolibriVersion":"3.0.6"};
149
+ const Env = /* kolibri */ {"kolibriVersion":"3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0"};
150
150
 
151
151
  function getDefaultExportFromCjs (x) {
152
152
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -24040,7 +24040,7 @@ class KolLink {
24040
24040
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24041
24041
  }
24042
24042
  render() {
24043
- return (hAsync(KolLinkWcTag, { key: '03845ba8174f61ccd51dff5582366838b592a51b', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'fe37428810daa893ffad28d3d876f29d14c499d3', name: "expert", slot: "expert" })));
24043
+ return (hAsync(KolLinkWcTag, { key: 'c5eb6e69486167d08be5f72fd18c71517e5cd510', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'fb190ca8116d3bec9461ea79345d816140a15f59', name: "expert", slot: "expert" })));
24044
24044
  }
24045
24045
  static get delegatesFocus() { return true; }
24046
24046
  static get style() { return {
@@ -24052,7 +24052,9 @@ class KolLink {
24052
24052
  "$members$": {
24053
24053
  "_accessKey": [1, "_access-key"],
24054
24054
  "_ariaCurrentValue": [1, "_aria-current-value"],
24055
+ "_ariaControls": [1, "_aria-controls"],
24055
24056
  "_ariaDescription": [1, "_aria-description"],
24057
+ "_ariaExpanded": [4, "_aria-expanded"],
24056
24058
  "_disabled": [4],
24057
24059
  "_download": [1],
24058
24060
  "_hideLabel": [4, "_hide-label"],
@@ -24091,7 +24093,7 @@ class KolLinkButton {
24091
24093
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24092
24094
  }
24093
24095
  render() {
24094
- return (hAsync(KolLinkWcTag, { key: '21a986729a4a7adbfcf0bdc7239e8f8837893d07', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: '9492236dc04b58a0ff0b9a996c30b9848c939b83', name: "expert", slot: "expert" })));
24096
+ return (hAsync(KolLinkWcTag, { key: '6ea1d0c984d423bb6d3cd5889a4ced387ea4af78', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: '2a2613d4dd72a2a10656896dc5a6e85171a405b7', name: "expert", slot: "expert" })));
24095
24097
  }
24096
24098
  static get delegatesFocus() { return true; }
24097
24099
  static get style() { return {
@@ -24103,6 +24105,7 @@ class KolLinkButton {
24103
24105
  "$members$": {
24104
24106
  "_accessKey": [1, "_access-key"],
24105
24107
  "_ariaCurrentValue": [1, "_aria-current-value"],
24108
+ "_ariaControls": [1, "_aria-controls"],
24106
24109
  "_ariaDescription": [1, "_aria-description"],
24107
24110
  "_customClass": [1, "_custom-class"],
24108
24111
  "_disabled": [4],
@@ -24186,7 +24189,7 @@ class KolLinkWc {
24186
24189
  const { isExternal, tagAttrs } = this.getRenderValues();
24187
24190
  const hasExpertSlot = showExpertSlot(this.state._label);
24188
24191
  const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
24189
- return (hAsync(Host, { key: '66b211cb214bc8af1454b049d91a45692d551490' }, hAsync("a", Object.assign({ key: '16e863863af7e519d66ef145011620121b96ab87', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24192
+ return (hAsync(Host, { key: '5f37728ff0adf71e7fba66f1ef848046805a5f2a' }, hAsync("a", Object.assign({ key: '2ba184d05d312f30ad2e52687a8180c9838d84b2', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24190
24193
  ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
24191
24194
  : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
24192
24195
  'kol-link--disabled': this.state._disabled === true,
@@ -24195,7 +24198,7 @@ class KolLinkWc {
24195
24198
  [`kol-link--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
24196
24199
  [`kol-link--${this.state._linkVariant}`]: this.state._linkVariant,
24197
24200
  [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
24198
- }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '022d1349f438c9c293e39a803023bdd8bacbda41', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'c170704bd6a44996790835133d93fa17a802c0e9', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '60d7c870b7eb6151cb7424a0e54fd725321d49bc', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'a6568660f068804b8db4cf83e334462f27879099', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: '43ec466872989138e38c318f8396f7d3284721e1', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
24201
+ }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '91d67f8f7fc11f2d19fb992ef4899a9bcb142e3c', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '13f20a8404a98d5d9297168267a0ca6ec6e1a172', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '77393cfff4cae37b54f58f8b7889961ff7de9fb5', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'cd9a2c2c3f93e741ece7aa0ac1511b75b5ba9230', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: 'b6c9d8748e9f8b8ed5d2eb424684efe6fdab0b19', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
24199
24202
  }
24200
24203
  validateAccessKey(value) {
24201
24204
  validateAccessKey(this, value);
@@ -24204,6 +24207,9 @@ class KolLinkWc {
24204
24207
  validateAriaCurrentValue(value) {
24205
24208
  validateAriaCurrentValue(this, value);
24206
24209
  }
24210
+ validateAriaControls(value) {
24211
+ validateAriaControls(this, value);
24212
+ }
24207
24213
  validateAriaDescription(value) {
24208
24214
  validateAriaDescription(this, value);
24209
24215
  }
@@ -24264,6 +24270,7 @@ class KolLinkWc {
24264
24270
  componentWillLoad() {
24265
24271
  this.validateAccessKey(this._accessKey);
24266
24272
  this.validateAriaCurrentValue(this._ariaCurrentValue);
24273
+ this.validateAriaControls(this._ariaControls);
24267
24274
  this.validateAriaDescription(this._ariaDescription);
24268
24275
  this.validateAriaExpanded(this._ariaExpanded);
24269
24276
  this.validateAriaOwns(this._ariaOwns);
@@ -24294,6 +24301,7 @@ class KolLinkWc {
24294
24301
  static get watchers() { return {
24295
24302
  "_accessKey": ["validateAccessKey"],
24296
24303
  "_ariaCurrentValue": ["validateAriaCurrentValue"],
24304
+ "_ariaControls": ["validateAriaControls"],
24297
24305
  "_ariaDescription": ["validateAriaDescription"],
24298
24306
  "_ariaExpanded": ["validateAriaExpanded"],
24299
24307
  "_ariaOwns": ["validateAriaOwns"],
@@ -24319,6 +24327,7 @@ class KolLinkWc {
24319
24327
  "$members$": {
24320
24328
  "_accessKey": [1, "_access-key"],
24321
24329
  "_ariaCurrentValue": [1, "_aria-current-value"],
24330
+ "_ariaControls": [1, "_aria-controls"],
24322
24331
  "_ariaDescription": [1, "_aria-description"],
24323
24332
  "_ariaExpanded": [4, "_aria-expanded"],
24324
24333
  "_ariaOwns": [1, "_aria-owns"],
@@ -24477,8 +24486,8 @@ class KolNav {
24477
24486
  'kol-nav__list--nested': props.deep > 0,
24478
24487
  'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
24479
24488
  'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
24480
- }), "data-deep": props.deep }, props.links.map((link, index) => {
24481
- return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);
24489
+ }), "data-deep": props.deep, id: props.id }, props.links.map((link, index) => {
24490
+ return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);
24482
24491
  })));
24483
24492
  };
24484
24493
  this._collapsible = true;
@@ -24503,7 +24512,7 @@ class KolNav {
24503
24512
  collapseChildren(children) {
24504
24513
  this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
24505
24514
  }
24506
- entry(collapsible, hideLabel, hasChildren, entry, expanded) {
24515
+ entry(collapsible, hideLabel, hasChildren, entry, expanded, ariaID) {
24507
24516
  var _a;
24508
24517
  const icons = {
24509
24518
  left: this.state._hasIconsWhenExpanded || this.state._hideLabel
@@ -24513,9 +24522,9 @@ class KolNav {
24513
24522
  };
24514
24523
  return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
24515
24524
  'kol-nav__entry--collapsible': collapsible,
24516
- }) }, entry, { _hideLabel: hideLabel, _icons: icons }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
24525
+ }) }, entry, { _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
24517
24526
  'kol-nav__entry--collapsible': collapsible,
24518
- }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _on: {
24527
+ }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
24519
24528
  onClick: (event, value) => {
24520
24529
  if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
24521
24530
  entry._on.onClick(event, value);
@@ -24524,15 +24533,16 @@ class KolNav {
24524
24533
  },
24525
24534
  } }))));
24526
24535
  }
24527
- li(collapsible, hideLabel, deep, index, link, orientation) {
24536
+ li(collapsible, hideLabel, deep, index, link, orientation, ariaIDparent) {
24528
24537
  const active = !!link._active;
24529
24538
  const hasChildren = Array.isArray(link._children) && link._children.length > 0;
24530
24539
  const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
24540
+ const ariaID = ariaIDparent + '_' + deep + '_' + index;
24531
24541
  return (hAsync("li", { class: clsx('kol-nav__list-item', {
24532
24542
  'kol-nav__list-item--active': active,
24533
24543
  'kol-nav__list-item--expanded': expanded,
24534
24544
  'kol-nav__list-item--has-children': hasChildren,
24535
- }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded), expanded && hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation })));
24545
+ }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded, ariaID), expanded && (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID }))));
24536
24546
  }
24537
24547
  initializeExpandedChildren() {
24538
24548
  this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
@@ -24564,9 +24574,10 @@ class KolNav {
24564
24574
  const collapsible = this.state._collapsible === true;
24565
24575
  const hideLabel = this.state._hideLabel === true;
24566
24576
  const orientation = this.state._orientation;
24567
- return (hAsync("div", { key: '281b2ef54a467b8c7888953e12873d79ca8e6744', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24577
+ const id = 'kol-nav-' + nonce();
24578
+ return (hAsync("div", { key: '953b90192368f67370123c89c5502209e0928be5', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24568
24579
  'kol-nav--is-compact': this.state._hideLabel,
24569
- }) }, hAsync("nav", { key: 'f1e0472c03b03191f42a5461a96d2662ae5b11f5', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'ab6312da64916959aa4d87271e8216a95bf26b37', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '0c55b966f51845a27429b3348e65681c577e2b26', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'a90de42edafde03135036a5bdf1efbfba839fd72', class: "kol-nav__toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
24580
+ }) }, hAsync("nav", { key: '42f841544dde2ddd8340e0bb705c94f6212c6d6d', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '70c345730d6e3d66bd8d05c62b87eeea26fa9d79', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: id })), hasCompactButton && (hAsync("div", { key: 'd8a072335ea4b41980d0b7b556aa4e29b1cc1eda', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'b9e6b197b9fe311696f03b640b8c23f291cb18fc', class: "kol-nav__toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
24570
24581
  onClick: () => {
24571
24582
  this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
24572
24583
  },
package/dist/index.mjs CHANGED
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
144
144
 
145
145
  const NAMESPACE = 'kolibri';
146
146
  const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, updatable: true};
147
- const Env = /* kolibri */ {"kolibriVersion":"3.0.6"};
147
+ const Env = /* kolibri */ {"kolibriVersion":"3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0"};
148
148
 
149
149
  function getDefaultExportFromCjs (x) {
150
150
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -24038,7 +24038,7 @@ class KolLink {
24038
24038
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24039
24039
  }
24040
24040
  render() {
24041
- return (hAsync(KolLinkWcTag, { key: '03845ba8174f61ccd51dff5582366838b592a51b', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'fe37428810daa893ffad28d3d876f29d14c499d3', name: "expert", slot: "expert" })));
24041
+ return (hAsync(KolLinkWcTag, { key: 'c5eb6e69486167d08be5f72fd18c71517e5cd510', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'fb190ca8116d3bec9461ea79345d816140a15f59', name: "expert", slot: "expert" })));
24042
24042
  }
24043
24043
  static get delegatesFocus() { return true; }
24044
24044
  static get style() { return {
@@ -24050,7 +24050,9 @@ class KolLink {
24050
24050
  "$members$": {
24051
24051
  "_accessKey": [1, "_access-key"],
24052
24052
  "_ariaCurrentValue": [1, "_aria-current-value"],
24053
+ "_ariaControls": [1, "_aria-controls"],
24053
24054
  "_ariaDescription": [1, "_aria-description"],
24055
+ "_ariaExpanded": [4, "_aria-expanded"],
24054
24056
  "_disabled": [4],
24055
24057
  "_download": [1],
24056
24058
  "_hideLabel": [4, "_hide-label"],
@@ -24089,7 +24091,7 @@ class KolLinkButton {
24089
24091
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24090
24092
  }
24091
24093
  render() {
24092
- return (hAsync(KolLinkWcTag, { key: '21a986729a4a7adbfcf0bdc7239e8f8837893d07', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: '9492236dc04b58a0ff0b9a996c30b9848c939b83', name: "expert", slot: "expert" })));
24094
+ return (hAsync(KolLinkWcTag, { key: '6ea1d0c984d423bb6d3cd5889a4ced387ea4af78', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: '2a2613d4dd72a2a10656896dc5a6e85171a405b7', name: "expert", slot: "expert" })));
24093
24095
  }
24094
24096
  static get delegatesFocus() { return true; }
24095
24097
  static get style() { return {
@@ -24101,6 +24103,7 @@ class KolLinkButton {
24101
24103
  "$members$": {
24102
24104
  "_accessKey": [1, "_access-key"],
24103
24105
  "_ariaCurrentValue": [1, "_aria-current-value"],
24106
+ "_ariaControls": [1, "_aria-controls"],
24104
24107
  "_ariaDescription": [1, "_aria-description"],
24105
24108
  "_customClass": [1, "_custom-class"],
24106
24109
  "_disabled": [4],
@@ -24184,7 +24187,7 @@ class KolLinkWc {
24184
24187
  const { isExternal, tagAttrs } = this.getRenderValues();
24185
24188
  const hasExpertSlot = showExpertSlot(this.state._label);
24186
24189
  const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
24187
- return (hAsync(Host, { key: '66b211cb214bc8af1454b049d91a45692d551490' }, hAsync("a", Object.assign({ key: '16e863863af7e519d66ef145011620121b96ab87', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24190
+ return (hAsync(Host, { key: '5f37728ff0adf71e7fba66f1ef848046805a5f2a' }, hAsync("a", Object.assign({ key: '2ba184d05d312f30ad2e52687a8180c9838d84b2', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24188
24191
  ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
24189
24192
  : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
24190
24193
  'kol-link--disabled': this.state._disabled === true,
@@ -24193,7 +24196,7 @@ class KolLinkWc {
24193
24196
  [`kol-link--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
24194
24197
  [`kol-link--${this.state._linkVariant}`]: this.state._linkVariant,
24195
24198
  [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
24196
- }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '022d1349f438c9c293e39a803023bdd8bacbda41', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'c170704bd6a44996790835133d93fa17a802c0e9', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '60d7c870b7eb6151cb7424a0e54fd725321d49bc', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'a6568660f068804b8db4cf83e334462f27879099', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: '43ec466872989138e38c318f8396f7d3284721e1', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
24199
+ }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '91d67f8f7fc11f2d19fb992ef4899a9bcb142e3c', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '13f20a8404a98d5d9297168267a0ca6ec6e1a172', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '77393cfff4cae37b54f58f8b7889961ff7de9fb5', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'cd9a2c2c3f93e741ece7aa0ac1511b75b5ba9230', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: 'b6c9d8748e9f8b8ed5d2eb424684efe6fdab0b19', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
24197
24200
  }
24198
24201
  validateAccessKey(value) {
24199
24202
  validateAccessKey(this, value);
@@ -24202,6 +24205,9 @@ class KolLinkWc {
24202
24205
  validateAriaCurrentValue(value) {
24203
24206
  validateAriaCurrentValue(this, value);
24204
24207
  }
24208
+ validateAriaControls(value) {
24209
+ validateAriaControls(this, value);
24210
+ }
24205
24211
  validateAriaDescription(value) {
24206
24212
  validateAriaDescription(this, value);
24207
24213
  }
@@ -24262,6 +24268,7 @@ class KolLinkWc {
24262
24268
  componentWillLoad() {
24263
24269
  this.validateAccessKey(this._accessKey);
24264
24270
  this.validateAriaCurrentValue(this._ariaCurrentValue);
24271
+ this.validateAriaControls(this._ariaControls);
24265
24272
  this.validateAriaDescription(this._ariaDescription);
24266
24273
  this.validateAriaExpanded(this._ariaExpanded);
24267
24274
  this.validateAriaOwns(this._ariaOwns);
@@ -24292,6 +24299,7 @@ class KolLinkWc {
24292
24299
  static get watchers() { return {
24293
24300
  "_accessKey": ["validateAccessKey"],
24294
24301
  "_ariaCurrentValue": ["validateAriaCurrentValue"],
24302
+ "_ariaControls": ["validateAriaControls"],
24295
24303
  "_ariaDescription": ["validateAriaDescription"],
24296
24304
  "_ariaExpanded": ["validateAriaExpanded"],
24297
24305
  "_ariaOwns": ["validateAriaOwns"],
@@ -24317,6 +24325,7 @@ class KolLinkWc {
24317
24325
  "$members$": {
24318
24326
  "_accessKey": [1, "_access-key"],
24319
24327
  "_ariaCurrentValue": [1, "_aria-current-value"],
24328
+ "_ariaControls": [1, "_aria-controls"],
24320
24329
  "_ariaDescription": [1, "_aria-description"],
24321
24330
  "_ariaExpanded": [4, "_aria-expanded"],
24322
24331
  "_ariaOwns": [1, "_aria-owns"],
@@ -24475,8 +24484,8 @@ class KolNav {
24475
24484
  'kol-nav__list--nested': props.deep > 0,
24476
24485
  'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
24477
24486
  'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
24478
- }), "data-deep": props.deep }, props.links.map((link, index) => {
24479
- return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);
24487
+ }), "data-deep": props.deep, id: props.id }, props.links.map((link, index) => {
24488
+ return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);
24480
24489
  })));
24481
24490
  };
24482
24491
  this._collapsible = true;
@@ -24501,7 +24510,7 @@ class KolNav {
24501
24510
  collapseChildren(children) {
24502
24511
  this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
24503
24512
  }
24504
- entry(collapsible, hideLabel, hasChildren, entry, expanded) {
24513
+ entry(collapsible, hideLabel, hasChildren, entry, expanded, ariaID) {
24505
24514
  var _a;
24506
24515
  const icons = {
24507
24516
  left: this.state._hasIconsWhenExpanded || this.state._hideLabel
@@ -24511,9 +24520,9 @@ class KolNav {
24511
24520
  };
24512
24521
  return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
24513
24522
  'kol-nav__entry--collapsible': collapsible,
24514
- }) }, entry, { _hideLabel: hideLabel, _icons: icons }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
24523
+ }) }, entry, { _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
24515
24524
  'kol-nav__entry--collapsible': collapsible,
24516
- }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _on: {
24525
+ }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
24517
24526
  onClick: (event, value) => {
24518
24527
  if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
24519
24528
  entry._on.onClick(event, value);
@@ -24522,15 +24531,16 @@ class KolNav {
24522
24531
  },
24523
24532
  } }))));
24524
24533
  }
24525
- li(collapsible, hideLabel, deep, index, link, orientation) {
24534
+ li(collapsible, hideLabel, deep, index, link, orientation, ariaIDparent) {
24526
24535
  const active = !!link._active;
24527
24536
  const hasChildren = Array.isArray(link._children) && link._children.length > 0;
24528
24537
  const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
24538
+ const ariaID = ariaIDparent + '_' + deep + '_' + index;
24529
24539
  return (hAsync("li", { class: clsx('kol-nav__list-item', {
24530
24540
  'kol-nav__list-item--active': active,
24531
24541
  'kol-nav__list-item--expanded': expanded,
24532
24542
  'kol-nav__list-item--has-children': hasChildren,
24533
- }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded), expanded && hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation })));
24543
+ }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded, ariaID), expanded && (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID }))));
24534
24544
  }
24535
24545
  initializeExpandedChildren() {
24536
24546
  this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
@@ -24562,9 +24572,10 @@ class KolNav {
24562
24572
  const collapsible = this.state._collapsible === true;
24563
24573
  const hideLabel = this.state._hideLabel === true;
24564
24574
  const orientation = this.state._orientation;
24565
- return (hAsync("div", { key: '281b2ef54a467b8c7888953e12873d79ca8e6744', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24575
+ const id = 'kol-nav-' + nonce();
24576
+ return (hAsync("div", { key: '953b90192368f67370123c89c5502209e0928be5', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24566
24577
  'kol-nav--is-compact': this.state._hideLabel,
24567
- }) }, hAsync("nav", { key: 'f1e0472c03b03191f42a5461a96d2662ae5b11f5', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'ab6312da64916959aa4d87271e8216a95bf26b37', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '0c55b966f51845a27429b3348e65681c577e2b26', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'a90de42edafde03135036a5bdf1efbfba839fd72', class: "kol-nav__toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
24578
+ }) }, hAsync("nav", { key: '42f841544dde2ddd8340e0bb705c94f6212c6d6d', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '70c345730d6e3d66bd8d05c62b87eeea26fa9d79', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: id })), hasCompactButton && (hAsync("div", { key: 'd8a072335ea4b41980d0b7b556aa4e29b1cc1eda', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'b9e6b197b9fe311696f03b640b8c23f291cb18fc', class: "kol-nav__toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
24568
24579
  onClick: () => {
24569
24580
  this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
24570
24581
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/hydrate",
3
- "version": "3.0.6",
3
+ "version": "3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": {
@@ -46,10 +46,10 @@
46
46
  ],
47
47
  "devDependencies": {
48
48
  "rimraf": "6.0.1",
49
- "@public-ui/components": "3.0.6"
49
+ "@public-ui/components": "3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "3.0.6"
52
+ "@public-ui/components": "3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "commonjs",