@kickstartds/ds-agency-premium 1.6.71--canary.55.2416.0 → 1.6.71

package/dist/components/nav-topbar/nav-topbar.css

@@ -2,19 +2,13 @@
   --dsa-nav-topbar__label--color: var(--ks-color-fg);
   --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
-  --dsa-nav-topbar__label--background-color: transparent;
-  --dsa-nav-topbar__label--background-color_hover: var(--ks-color-fg-alpha-8);
-  --dsa-nav-topbar__label--background-color_active: transparent;
-  --dsa-nav-topbar__label--font-size: var(--ks-font-size-interface-s);
-  --dsa-nav-topbar__label--font-family: var(--ks-font-family-display);
+  --dsa-nav-topbar__label--font: var(--ks-font-interface-m);
   --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
-  --dsa-nav-topbar__label--padding: 0.45em 0.75em;
+  --dsa-nav-topbar__label--padding: 0.75em 0.75em;
   --dsa-nav-topbar__label--text-decoration: none;
   --dsa-nav-topbar__label--text-decoration_hover: none;
-  --dsa-nav-topbar__label_dimmed--opacity: 1;
-  --dsa-nav-topbar__label--transition: var(--ks-transition-hover);
-  --dsa-nav-topbar__label--transition-property: background-color, color, opacity;
+  --dsa-nav-topbar__label_dimmed--opacity: 0.6;
   --dsa-nav-topbar__label__icon--size: 1.5em;
   --dsa-nav-topbar_floating__label_dimmed--opacity: 0.85;
   --dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
@@ -61,7 +55,6 @@
 }
 .dsa-nav-topbar .dsa-nav-topbar__item--active .dsa-nav-topbar__label {
   color: var(--dsa-nav-topbar__label--color_active);
-  background-color: var(--dsa-nav-topbar__label--background-color_active);
   font-weight: var(--dsa-nav-topbar__label--font-weight_active);
 }
 .dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item:focus-within > .dsa-nav-dropdown {
@@ -72,22 +65,16 @@
 }
 .dsa-nav-topbar .dsa-nav-topbar__label {
   display: flex;
-  font-family: var(--dsa-nav-topbar__label--font-family);
-  font-size: var(--dsa-nav-topbar__label--font-size);
+  font: var(--dsa-nav-topbar__label--font);
   font-weight: var(--dsa-nav-topbar__label--font-weight);
   color: var(--dsa-nav-topbar__label--color);
-  background-color: var(--dsa-nav-topbar__label--background-color);
-  border-radius: var(--ks-border-radius-control);
   height: 100%;
   align-items: center;
   padding: var(--dsa-nav-topbar__label--padding);
   text-decoration: var(--dsa-nav-topbar__label--text-decoration);
-  transition: var(--dsa-nav-topbar__label--transition);
-  transition-property: var(--dsa-nav-topbar__label--transition-property);
 }
 .dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus, .dsa-nav-topbar .dsa-nav-topbar__label:active {
   color: var(--dsa-nav-topbar__label--color_hover);
-  background-color: var(--dsa-nav-topbar__label--background-color_hover);
   text-decoration: var(--dsa-nav-topbar__label--text-decoration_hover);
 }
 .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label {

package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json

@@ -9,7 +9,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "url": {
+          "href": {
             "type": "string",
             "format": "uri"
           },
@@ -24,7 +24,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "url": {
+                "href": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -41,7 +41,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "url",
+          "href",
           "label"
         ]
       },
@@ -49,43 +49,43 @@
         [
           {
             "label": "Active Item",
-            "url": "#",
+            "href": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Dropdown",
-            "url": "#",
+            "href": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "url": "#"
+                "href": "#"
               },
               {
                 "label": "And One last one",
-                "url": "#"
+                "href": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "url": "#"
+            "href": "#"
           },
           {
             "label": "Last Item",
-            "url": "#"
+            "href": "#"
           }
         ]
       ]
@@ -95,6 +95,9 @@
       "title": "Dropdown Inverted",
       "description": "Toggle the inversion of the dropdown navigation",
       "default": false
+    },
+    "type": {
+      "const": "nav-topbar"
     }
   },
   "additionalProperties": false,