@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/stories/tegel.stories.js

@@ -0,0 +1,293 @@
+const meta = {
+  title: 'Intro/Tegel Design System',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const TegelDesignSystem = {
+  render: () => `<style>
+                    article {
+                        box-sizing: border-box;
+                        max-width: 688px;
+                        padding: 32px;
+                        margin: auto;
+                        > * {
+                            margin-bottom: 72px;
+                        }
+                    }
+
+                    section > p,
+                    section > ul,
+                    section > tds-link {
+                        margin-bottom: 32px;
+                    }
+
+                    tds-link {
+                        display: inline-block;
+                    }
+
+                    .mb-72 {
+                        margin-bottom: 72px;
+                    }
+                </style>
+
+                <tds-banner type="information" icon="information" header="We are moving away from the sdds prefix!">
+                <tds-link slot="bottom">
+                    <a target="_self" href="?path=/story/intro-announcements--prefix-change">
+                        Read more here!
+                    </a>
+                </tds-link>
+                </tds-banner>
+
+                <article class="tds-body-01">
+                    <section>
+                        <h1 class="tds-headline-02 mb-72">Tegel Design System</h1>
+                        <p class="tds-paragraph-01 mb-72">The design system supports the design and development of digital solutions at
+                            Scania. The purpose is to secure a
+                            coherent, premium brand and user experience across all of Scania's digital touchpoints.
+                        </p>
+
+                        <tds-link>
+                            <a href="https://tegel.scania.com/">
+                                https://tegel.scania.com/
+                            </a>
+                        </tds-link>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">Status</h4>
+
+                        <p>
+                            This package is currently in a <b>pre-beta</b> stage. We are now working hard towards a 1.0-beta release,
+                            but if
+                            you
+                            want to try out the package today you can! It's available via <tds-link><a href="https://www.npmjs.com/package/@scania/tegel">NPM</a></tds-link> and can be installed using the
+                            installation
+                            guide which you can find <tds-link><a target="_self" href="?path=/story/intro-installation--page">here.</a></tds-link>
+                        </p>
+
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">@scania/tegel 🧱</h4>
+
+                        <p>
+                            <b>TLDR;</b> The new @scania/tegel package is an improvement and continuation of the previous
+                            @scania/component,
+                            @scania/theme-light, and @scania/icons packages. It simplifies the installation process and ships with types
+                            which offers type safety and improves the developer experience with intellisence and autocompletion.
+                        </p>
+                        <p>
+                            The new
+                            package includes all components as web components, removes the old "native" components and makes the
+                            installation and updates easier. The current prefix for components, CSS variables, and utility classes -
+                            "sdds",
+                            will be changed. We have also created a new Storybook for @scania/tegel, which allows developers and
+                            designers
+                            to preview all variants of the components by changing the props.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            What is @scania/tegel? 🧱
+                        </h4>
+
+
+
+
+                        <p>
+                            In short, the new @scania/tegel package is an improvement and continuation of the previous
+                            @scania/component,
+                            @scania/theme-light and @scania/icons packages. These three packages have now instead been merged into one
+                            to
+                            simplify both the installation process, but also to make it easier for us to maintain and keep improving
+                            going
+                            forward.
+                        </p>
+                        <p>
+                            The new @scania/tegel is also shipped with types. This makes integrations in other Stenciljs
+                            projects
+                            possible, but also improves the developer experience with intellisence and autocompletion, and of course
+                            type
+                            safety. In this work we have also bumped the Stenciljs version (the compiler used to build our components)
+                            to
+                            the
+                            latest major.
+                        </p>
+                        <p>
+                            And we have saved the best for last, @scania/tegel is 100% web component. Previous packages
+                            had
+                            some
+                            web components, but also "native" components, these were utility classes that could be added to a predefined
+                            HTML
+                            structure to create the look and feel of Tegel. Now we are making a big effort to provide all components as
+                            web
+                            components.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            What improvements does @scania/tegel have? 🚀
+                        </h4>
+
+
+                        <p>
+                            So, what we are striving for in the new package is:
+
+                        <ul>
+                            <li>Easy installation and updates</li>
+                            <li>A clear and intuitive API</li>
+                            <li>Types to be included in package bundle</li>
+                            <li>All input elements to work within a form</li>
+                            <li>Only web components</li>
+                            <li>Dark mode</li>
+                            <li>Improved interactive documentation - Storybook</li>
+                        </ul>
+
+                        <p>
+                            With this new package we are creating a foundation for us to stand on going forward. We will keep improving
+                            and
+                            maintaining it after its initial release and with the changes we are introducing now we hope to be able to
+                            do
+                            this as
+                            smoothly as possible.
+                        </p>
+
+
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Removing "native" components ❌
+                        </h4>
+
+
+                        <p>
+                            With this new package we are also removing our "native" components and instead introducing web component
+                            counterparts to these. This means that every component that was available as a "native" component in
+                            @scania/components will have a web component alternative in @scania/tegel. This removal will be done in our
+                            next
+                            release of @scania/tegel. This change does not change the current @scania/components package.
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Prefix change 🔁
+                        </h4>
+
+
+                        <tds-link class="tds-u-mt2 tds-body-01">
+                            <a target="_self" href="?path=/story/intro-announcements--prefix-change">Read more here.</a>
+                        </tds-link>
+                        <p>
+                            We are also working on a prefix change for our new package. Instead of "sdds" the components, CSS variables
+                            and
+                            utility classes will instead be prefixed with something else, for example:
+                        <ul>
+                            <li> <{prefix}-button /> </li>
+                            <li> --{prefix}-button-color </li>
+                            <li>.{prefix}-u-flex</li>
+                        </ul>
+                        <p>
+                            This is done to have a clear distinction between what was @scania/components and what is @scania/tegel. What
+                            it
+                            also
+                            does is that it enables the two solutions to be installed alongside each other. This means that your
+                            migration
+                            can
+                            be
+                            done incrementally.
+                        </p>
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            Migration docs 📜
+                        </h4>
+
+
+                        <p>
+                            Migrations are always hard, but during the last couple of months we have put a lot of effort into creating a
+                            "migration document", which explains and highlights all the changes in our API from version 4 of
+                            @scania/components
+                            and @scania/tegel. We hope that this will ease your migration to our new package. The migration document
+                            will
+                            continue to be updated until we release 1.0 and is available
+                            <tds-link><a target="_self"
+                                    href="?path=/story/intro-migrating-from-components-v4--page">here.</a></tds-link>
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            Support for @scania/components 🤳
+                        </h4>
+
+
+                        <p>
+                            We will keep supporting @scania/components for a short while going forward, however we see no major
+                            updates
+                            being
+                            done to the package. This means we will keep answering and helping with support questions and do
+                            minor
+                            releases with
+                            bugfixes, but we are not introducing any new features.
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            When can I try our @scania/tegel? 🧪
+                        </h4>
+
+
+                        <p>
+                            Today! Some of you have already tried this package out, and provided us with valuable feedback,
+                            thank
+                            you!
+                            But
+                            please note that this package is still in beta and breaking changes are to be expected before we
+                            release
+                            1.0. The
+                            package is available via npm and an installation guide is available <tds-link><a
+                                    href="https://www.npmjs.com/package/@scania/tegel">here.</a></tds-link>
+
+                        </p>
+                    </section>
+                    <section>
+
+                        <h4 class="tds-u-mb1">
+                            Want to get in touch? 📞
+                        </h4>
+
+
+                        <p>
+                            Awesome! We are available via teams and have two support channels. One for
+                            <tds-link>
+                                <a
+                                    href="https://teams.microsoft.com/l/channel/19%3a5e33f67fe502441f914fbcdc6e2548f5%40thread.skype/Development%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">development</a>
+                            </tds-link>
+                            and one for
+                            <tds-link>
+                                <a
+                                    href="https://teams.microsoft.com/l/channel/19%3A8d30ded56af14672b471062ec1e66345%40thread.skype/Design%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">design.</a>
+
+                            </tds-link>
+                            If you want to submit a bug report or feature request, please do so via our
+                            <tds-link>
+                                <a href="https://github.com/scania-digital-design-system/tegel/issues">GitHub</a>
+                            </tds-link>.
+
+                        <p>
+                            All the best,<br />
+                            The Tegel Team.
+                        </p>
+                        </p>
+                    </section>
+                </article>
+  `,
+};

package/dist/collection/stories/utility/color/background-color.stories.js

@@ -0,0 +1,96 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Utilities/Colors',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    backgroundColor: {
+      name: 'Background color',
+      description: 'The color of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'backgroundColor', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'blue' },
+    },
+  },
+  args: {
+    backgroundColor: 'blue',
+    blueScale: '500',
+    redScale: '500',
+    greyScale: '958',
+  },
+};
+const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (backgroundColor) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
+  return formatHtmlPreview(`
+        <style>
+            .demo-wrapper{
+                height: 400px;
+                width: 400px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        </style>
+        <div class="tds-background-${backgroundColor}-${scale} demo-wrapper">
+            <h1>background-color:${backgroundColor}</h1>
+        </div>
+          `);
+};
+export const BackgroundColor = Template.bind({});

package/dist/collection/stories/utility/color/text-color.stories.js

@@ -0,0 +1,94 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Utilities/Colors',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    color: {
+      name: 'Color',
+      description: 'The color of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'color', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'color', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'color', eq: 'blue' },
+    },
+  },
+  args: {
+    color: 'blue',
+    blueScale: '500',
+    redScale: '500',
+    greyScale: '958',
+  },
+};
+const Template = ({ color, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (color) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
+  return formatHtmlPreview(`
+  <style>
+    .demo-wrapper h1 {
+      margin: 0;
+      width: 300px;
+    }
+  </style>
+  <div class="demo-wrapper">
+  <h1 class="tds-text-${color}-${scale}">A text ${color} heading</h1>
+  <p class="tds-text-${color}-${scale}">A text ${color} paragraph</p>
+  </div>
+  `);
+};
+export const TextColor = Template.bind({});

package/dist/collection/utils/utils.js

@@ -1,6 +1,6 @@
-import prettier from 'prettier/standalone';
-import parserBabel from 'prettier/parser-babel';
-import parserHtml from 'prettier/parser-html';
+import prettier from "prettier/standalone";
+import parserBabel from "prettier/parser-babel";
+import parserHtml from "prettier/parser-html";
 const prettierOptions = {
   bracketSameLine: false,
   htmlWhitespaceSensitivity: 'ignore',
@@ -336,3 +336,34 @@ export function isFocusable(element) {
   }
   return false;
 }
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+export const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+export function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,15 @@
+import { demoFormat } from "./utils";
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(demoFormat(undefined, undefined, undefined)).toEqual('');
+  });
+  it('formats just first names', () => {
+    expect(demoFormat('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+  it('formats first and last names', () => {
+    expect(demoFormat('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+  it('formats first, middle and last names', () => {
+    expect(demoFormat('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});

package/dist/components/checkbox.js

@@ -0,0 +1,74 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
+
+const checkboxCss = ".tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+
+const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsFocus = createEvent(this, "tdsFocus", 6);
+    this.tdsBlur = createEvent(this, "tdsBlur", 6);
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.tdsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = generateUniqueId();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the component */
+  handleFocus(event) {
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as blur when clicking outside the component */
+  handleBlur(event) {
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "tds-checkbox" }, h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        this.handleChange();
+      } }), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return checkboxCss; }
+}, [6, "tds-checkbox", {
+    "name": [1],
+    "checkboxId": [1, "checkbox-id"],
+    "disabled": [4],
+    "required": [4],
+    "checked": [516],
+    "value": [1],
+    "toggleCheckbox": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsCheckbox);
+      }
+      break;
+  } });
+}
+
+export { TdsCheckbox as T, defineCustomElement as d };

package/dist/components/core-header-item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
 
-const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem extends HTMLElement {
+const TdsCoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsCoreHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -12,19 +12,19 @@ const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem ext
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
   }
   static get style() { return coreHeaderItemCss; }
-}, [1, "sdds-core-header-item"]);
+}, [1, "tds-core-header-item"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-core-header-item"];
+  const components = ["tds-core-header-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, CoreHeaderItem);
+        customElements.define(tagName, TdsCoreHeaderItem);
       }
       break;
   } });
 }
 
-export { CoreHeaderItem as C, defineCustomElement as d };
+export { TdsCoreHeaderItem as T, defineCustomElement as d };