@visma-swno/vsn-navigation 1.2.0-beta.2 → 1.2.0-beta.3

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 (2) hide show
  1. package/dist/assets/vsn-navigation.js +68 -66
  2. package/package.json +1 -1
package/dist/assets/vsn-navigation.js CHANGED
@@ -567,78 +567,80 @@ var L = class extends e {
567
567
  }
568
568
  static {
569
569
  this.styles = [t`
570
- /* Every dimension multiplies by --ga-base-scaling-factor (default 1) so the
571
- whole component scales uniformly with the host's density setting.
572
- Layout spacing lives on the inner .row, NOT on :host — a consuming app's
573
- reset (* { margin: 0; padding: 0 }) overrides :host but can't reach the shadow. */
574
- :host {
575
- display: block;
576
- border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
577
- }
570
+ /* Every dimension multiplies by --ga-base-scaling-factor (default 1) so the
571
+ whole component scales uniformly with the host's density setting.
572
+ Layout spacing lives on the inner .row, NOT on :host — a consuming app's
573
+ reset (* { margin: 0; padding: 0 }) overrides :host but can't reach the shadow. */
578
574
 
579
- :host(:hover) {
580
- background-color: var(--ga-color-surface-action-hover-2);
581
- }
575
+ :host {
576
+ display: block;
577
+ border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
578
+ cursor: pointer;
579
+ }
582
580
 
583
- :host(:focus-visible) {
584
- outline: calc(2px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-focus);
585
- outline-offset: calc(4px * var(--ga-base-scaling-factor, 1));
586
- }
581
+ :host(:hover) {
582
+ background-color: var(--ga-color-surface-action-hover-2);
583
+ }
587
584
 
588
- .row {
589
- display: flex;
590
- align-items: center;
591
- /* spacing-04 padding-block + 20px label line-height = 44px row,
592
- matching Gaia's .ga-side-navigation__item (py-3 / px-4 / gap-3). */
593
- gap: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
594
- padding-block: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
595
- padding-inline: calc(var(--ga-size-spacing-05) * var(--ga-base-scaling-factor, 1));
596
- }
585
+ :host(:focus-visible) {
586
+ outline: calc(2px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-focus);
587
+ outline-offset: calc(4px * var(--ga-base-scaling-factor, 1));
588
+ }
597
589
 
598
- .icon {
599
- width: calc(1rem * var(--ga-base-scaling-factor, 1));
600
- flex-shrink: 0;
601
- color: var(--ga-color-icon-primary);
602
- display: inline-flex;
603
- align-items: center;
604
- }
590
+ .row {
591
+ display: flex;
592
+ align-items: center;
593
+ /* spacing-04 padding-block + 20px label line-height = 44px row,
594
+ matching Gaia's .ga-side-navigation__item (py-3 / px-4 / gap-3). */
595
+ gap: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
596
+ padding-block: calc(var(--ga-size-spacing-04) * var(--ga-base-scaling-factor, 1));
597
+ padding-inline: calc(var(--ga-size-spacing-05) * var(--ga-base-scaling-factor, 1));
598
+ }
605
599
 
606
- .label {
607
- flex: 1;
608
- display: inline-flex;
609
- overflow: hidden;
610
- white-space: nowrap;
611
- text-overflow: ellipsis;
612
- font-family: Inter, ui-sans-serif, system-ui, sans-serif;
613
- font-feature-settings: 'liga' 1, 'calt' 1;
614
- font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
615
- line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
616
- letter-spacing: calc(var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1));
617
- color: var(--ga-color-text-action);
618
- }
600
+ .icon {
601
+ width: calc(1rem * var(--ga-base-scaling-factor, 1));
602
+ flex-shrink: 0;
603
+ color: var(--ga-color-icon-primary);
604
+ display: inline-flex;
605
+ align-items: center;
606
+ }
619
607
 
620
- slot[name="kbd"]::slotted(kbd) {
621
- display: inline-flex;
622
- align-items: center;
623
- justify-content: center;
624
- gap: calc(0.125rem * var(--ga-base-scaling-factor, 1));
625
- flex-shrink: 0;
626
- cursor: default;
627
- border: calc(1px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-disabled);
628
- border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
629
- background-color: var(--ga-color-white);
630
- /* !important: the <kbd> is host-provided slotted content, so a
631
- consuming app's * { padding: 0 } reset overrides ::slotted normal
632
- rules. We can't move it to an inner shadow element (it's the
633
- host's element), so important is the accepted defense here. */
634
- padding-inline: calc(var(--ga-size-spacing-02) * var(--ga-base-scaling-factor, 1)) !important;
635
- padding-block: calc(1px * var(--ga-base-scaling-factor, 1)) !important;
636
- font-family: Inter, ui-sans-serif, system-ui, sans-serif;
637
- font-size: calc(var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1));
638
- line-height: calc(var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1));
639
- letter-spacing: calc(var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1));
640
- color: var(--ga-color-text-body);
641
- }
608
+ .label {
609
+ flex: 1;
610
+ display: inline-flex;
611
+ overflow: hidden;
612
+ white-space: nowrap;
613
+ text-overflow: ellipsis;
614
+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
615
+ font-feature-settings: 'liga' 1, 'calt' 1;
616
+ font-size: calc(var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1));
617
+ line-height: calc(var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1));
618
+ letter-spacing: calc(var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1));
619
+ color: var(--ga-color-text-action);
620
+ }
621
+
622
+ slot[name="kbd"]::slotted(kbd) {
623
+ display: inline-flex;
624
+ align-items: center;
625
+ justify-content: center;
626
+ gap: calc(0.125rem * var(--ga-base-scaling-factor, 1));
627
+ flex-shrink: 0;
628
+ cursor: default;
629
+ border: calc(1px * var(--ga-base-scaling-factor, 1)) solid var(--ga-color-border-disabled);
630
+ border-radius: calc(var(--ga-radius) * var(--ga-base-scaling-factor, 1));
631
+ background-color: var(--ga-color-white);
632
+ /* !important: the <kbd> is host-provided slotted content, so a
633
+ consuming app's * { padding: 0 } reset overrides ::slotted normal
634
+ rules. We can't move it to an inner shadow element (it's the
635
+ host's element), so important is the accepted defense here. */
636
+ padding-inline: calc(var(--ga-size-spacing-02) * var(--ga-base-scaling-factor, 1)) !important;
637
+ padding-block: calc(1px * var(--ga-base-scaling-factor, 1)) !important;
638
+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
639
+ font-size: calc(var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1));
640
+ line-height: calc(var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1));
641
+ letter-spacing: calc(var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1));
642
+ color: var(--ga-color-text-body);
643
+ }
642
644
  `];
643
645
  }
644
646
  connectedCallback() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visma-swno/vsn-navigation",
3
- "version": "1.2.0-beta.2",
3
+ "version": "1.2.0-beta.3",
4
4
  "type": "module",
5
5
  "customElements": "dist/custom-elements.json",
6
6
  "exports": {