@triptease/tt-navbar 0.0.56 → 0.0.58

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.56
+* @triptease/tt-navbar v0.0.58
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -37,16 +37,14 @@
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^7.6.20",
-    "@storybook/addon-essentials": "^7.6.20",
-    "@storybook/addon-links": "^7.6.20",
-    "@storybook/web-components": "^7.6.20",
+    "@storybook/addon-a11y": "^10.0.5",
+    "@storybook/addon-links": "^10.0.5",
+    "@storybook/web-components-vite": "^10.0.6",
     "@types/mocha": "^10.0.7",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@web/dev-server": "^0.4.6",
     "@web/storybook-builder": "^0.1.16",
-    "@web/storybook-framework-web-components": "^0.1.2",
     "@web/test-runner": "^0.18.2",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
@@ -54,7 +52,7 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.2",
-    "storybook": "^7.6.20",
+    "storybook": "^10.0.5",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3"
   },

package/src/styles.ts

@@ -163,7 +163,11 @@ export const styles = css`
       align-items: baseline;
 
       &::marker {
-        content: '';
+        display: none;
+      }
+
+      &::-webkit-details-marker {
+        display: none;
       }
     }
 
@@ -286,7 +290,7 @@ export const styles = css`
     opacity: 0;
   }
 
-  .nav-toggle-button:is(:hover,:focus-within) .nav-toggle-tooltip {
+  .nav-toggle-button:is(:hover, :focus-within) .nav-toggle-tooltip {
     visibility: visible;
     opacity: 1;
   }
@@ -320,5 +324,8 @@ export const styles = css`
     padding: var(--space-scale-1); /* match tt-combobox height */
     font-size: var(--font-size-200);
     color: var(--color-text-inverted-200);
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 `;

package/stories/tt-navbar.stories.ts

@@ -8,8 +8,8 @@ const meta = {
     clientKey: { control: 'text' },
     clients: { control: 'object' },
     campaignManagerUrl: { control: 'text' },
-    onClientChange: { action: 'clientChanged' }
-  }
+    onClientChange: { action: 'clientChanged' },
+  },
 };
 
 export default meta;
@@ -34,11 +34,11 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({
-                                     clientKey = 'zxd47KQGAP',
-                                     clients = [],
-                                     campaignManagerUrl = 'https://app.campaign-manager.triptease.io',
-                                     onClientChange
-                                   }: ArgTypes) => html`
+  clientKey = 'zxd47KQGAP',
+  clients = [],
+  campaignManagerUrl = 'https://app.campaign-manager.triptease.io',
+  onClientChange,
+}: ArgTypes) => html`
   <div>
     <tt-navbar
       client-key=${clientKey}
@@ -52,22 +52,35 @@ const Template: Story<ArgTypes> = ({
 
 const clientChangeHandler = (clientKey: string) => {
   console.log('Client changed to:', clientKey);
-}
+};
 
 export const MultipleClients = Template.bind({});
 MultipleClients.args = {
   clientKey: 'zxd47KQGAP',
   clients: [
     { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
-    { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
+    { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' },
+    {
+      clientKey: 'f6g7h8i9j0',
+      displayName: 'Demo Client with an Exceptionally Long Name for Testing',
+    },
   ],
-  onClientChange: clientChangeHandler
+  onClientChange: clientChangeHandler,
 };
 
 export const SingleClient = Template.bind({});
 SingleClient.args = {
+  clientKey: 'zxd47KQGAP',
+  clients: [{ clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }],
+};
+
+export const SingleClientLongName = Template.bind({});
+SingleClientLongName.args = {
   clientKey: 'zxd47KQGAP',
   clients: [
-    { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }
-  ]
+    {
+      clientKey: 'zxd47KQGAP',
+      displayName: 'Demo Client with an Exceptionally Long Name for Testing',
+    },
+  ],
 };