nve-designsystem 0.1.9 → 0.1.11

package/doc/nve-dialog.md

@@ -0,0 +1,79 @@
+# nve-dialog
+
+En sl-dialog i NVE-forkledning.
+Mer info: https://shoelace.style/components/dialog
+
+Vil du ha ikon foran tittelen kan du angi navnet på ikonet som attributt "icon".
+Skal det ikke være mulig å trykke utenfor for å lukke dialogen, sett på disableDialog attributt
+
+## Properties
+
+| Property            | Attribute           | Type          | Default | Description                                      |
+|---------------------|---------------------|---------------|---------|--------------------------------------------------|
+| `dialog`            |                     | `HTMLElement` |         |                                                  |
+| `dir`               |                     | `string`      |         |                                                  |
+| `disableBackground` | `disableBackground` | `boolean`     | false   | Hvis disableBacground er true, kan man ikke trykke utenfor dialogen for å lukke den. |
+| `icon`              | `icon`              | `string`      | ""      | Ikonet som skal vises                            |
+| `label`             |                     | `string`      |         | The dialog's label as displayed in the header. You should always include a relevant label even when using<br />`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. |
+| `lang`              |                     | `string`      |         |                                                  |
+| `modal`             |                     | `Modal`       |         | Exposes the internal modal utility that controls focus trapping. To temporarily disable focus<br />trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when<br />the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. |
+| `noHeader`          |                     | `boolean`     |         | Disables the header. This will also remove the default close button, so please ensure you provide an easy,<br />accessible way for users to dismiss the dialog. |
+| `open`              |                     | `boolean`     |         | Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can<br />use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. |
+| `overlay`           |                     | `HTMLElement` |         |                                                  |
+| `panel`             |                     | `HTMLElement` |         |                                                  |
+
+## Methods
+
+| Method               | Type                                             | Description                                      |
+|----------------------|--------------------------------------------------|--------------------------------------------------|
+| `emit`               | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
+| `handleOpenChange`   | `(): Promise<void>`                              |                                                  |
+| `handleRequestClose` | `(event: any): void`                             |                                                  |
+| `hide`               | `(): Promise<void>`                              | Hides the dialog                                 |
+| `show`               | `(): Promise<void>`                              | Shows the dialog.                                |
+| `updateIcon`         | `(): void`                                       |                                                  |
+
+## Events
+
+| Event              | Type                                             | Description                                      |
+|--------------------|--------------------------------------------------|--------------------------------------------------|
+| `sl-after-hide`    |                                                  | Emitted after the dialog closes and all animations are complete. |
+| `sl-after-show`    |                                                  | Emitted after the dialog opens and all animations are complete. |
+| `sl-hide`          |                                                  | Emitted when the dialog closes.                  |
+| `sl-initial-focus` |                                                  | Emitted when the dialog opens and is ready to receive focus. Calling<br />`event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. |
+| `sl-request-close` | `{ source: 'close-button' \| 'keyboard' \| 'overlay' }` | Emitted when the user attempts to<br />close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling<br />`event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in<br />destructive behavior such as data loss. |
+| `sl-show`          |                                                  | Emitted when the dialog opens.                   |
+
+## Slots
+
+| Name             | Description                                      |
+|------------------|--------------------------------------------------|
+|                  | The dialog's main content.                       |
+| `body`           | hovedinnholdet                                   |
+| `footer`         | feltet i bunden hvor knappene er plassert        |
+| `header-actions` | Optional actions to add to the header. Works best with `<sl-icon-button>`. |
+| `label`          | teksten som skal vises i overskriften. Eller du kan bruke label-attributtet |
+
+## CSS Shadow Parts
+
+| Part                 | Description                                      |
+|----------------------|--------------------------------------------------|
+| `base`               | The component's base wrapper.                    |
+| `body`               | The dialog's body.                               |
+| `close-button`       | The close button, an `<sl-icon-button>`.         |
+| `close-button__base` | The close button's exported `base` part.         |
+| `footer`             | The dialog's footer.                             |
+| `header`             | The dialog's header. This element wraps the title and header actions. |
+| `header-actions`     | Optional actions to add to the header. Works best with `<sl-icon-button>`. |
+| `overlay`            | The overlay that covers the screen behind the dialog. |
+| `panel`              | The dialog's panel (where the dialog and its content are rendered). |
+| `title`              | The dialog's title.                              |
+
+## CSS Custom Properties
+
+| Property           | Description                                      |
+|--------------------|--------------------------------------------------|
+| `--body-spacing`   | The amount of padding to use for the body.       |
+| `--footer-spacing` | The amount of padding to use for the footer.     |
+| `--header-spacing` | The amount of padding to use for the header.     |
+| `--width`          | The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. |

package/doc/nve-divider.md

@@ -0,0 +1,27 @@
+# nve-divider
+
+En Shoelace-divider i NVE-forkledning.
+Se https://shoelace.style/components/divider
+
+## Properties
+
+| Property   | Type      | Description                                  |
+|------------|-----------|----------------------------------------------|
+| `dir`      | `string`  |                                              |
+| `lang`     | `string`  |                                              |
+| `vertical` | `boolean` | Draws the divider in a vertical orientation. |
+
+## Methods
+
+| Method                 | Type                                             | Description                                      |
+|------------------------|--------------------------------------------------|--------------------------------------------------|
+| `emit`                 | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
+| `handleVerticalChange` | `(): void`                                       |                                                  |
+
+## CSS Custom Properties
+
+| Property    | Description                 |
+|-------------|-----------------------------|
+| `--color`   | The color of the divider.   |
+| `--spacing` | The spacing of the divider. |
+| `--width`   | The width of the divider.   |

package/doc/nve-dropdown.md

@@ -0,0 +1,65 @@
+# nve-dropdown
+
+En Shoelace-dropdown i NVE-forkledning.
+Se https://shoelace.style/components/dropdown
+
+## Properties
+
+| Property            | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `containingElement` | `HTMLElement \| undefined`                       | The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other<br />components that use a dropdown internally. |
+| `dir`               | `string`                                         |                                                  |
+| `disabled`          | `boolean`                                        | Disables the dropdown so the panel will not open. |
+| `distance`          | `number`                                         | The distance in pixels from which to offset the panel away from its trigger. |
+| `hoist`             | `boolean`                                        | Enable this option to prevent the panel from being clipped when the component is placed inside a container with<br />`overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. |
+| `lang`              | `string`                                         |                                                  |
+| `open`              | `boolean`                                        | Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you<br />can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. |
+| `panel`             | `HTMLSlotElement`                                |                                                  |
+| `placement`         | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "right" \| "right-start" \| "right-end" \| "left" \| "left-start" \| "left-end"` | The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel<br />inside of the viewport. |
+| `popup`             | `SlPopup`                                        |                                                  |
+| `skidding`          | `number`                                         | The distance in pixels from which to offset the panel along its trigger. |
+| `stayOpenOnSelect`  | `boolean`                                        | By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for<br />dropdowns that allow for multiple interactions. |
+| `trigger`           | `HTMLSlotElement`                                |                                                  |
+
+## Methods
+
+| Method                    | Type                                             | Description                                      |
+|---------------------------|--------------------------------------------------|--------------------------------------------------|
+| `addOpenListeners`        | `(): void`                                       |                                                  |
+| `emit`                    | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
+| `focusOnTrigger`          | `(): void`                                       |                                                  |
+| `getMenu`                 | `(): NveMenu \| undefined`                       |                                                  |
+| `handleOpenChange`        | `(): Promise<void>`                              |                                                  |
+| `handleTriggerClick`      | `(): void`                                       |                                                  |
+| `handleTriggerKeyDown`    | `(event: KeyboardEvent): Promise<void>`          |                                                  |
+| `handleTriggerKeyUp`      | `(event: KeyboardEvent): void`                   |                                                  |
+| `handleTriggerSlotChange` | `(): void`                                       |                                                  |
+| `hide`                    | `(): Promise<void>`                              | Hides the dropdown panel                         |
+| `removeOpenListeners`     | `(): void`                                       |                                                  |
+| `reposition`              | `(): void`                                       | Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu<br />is activated. |
+| `show`                    | `(): Promise<void>`                              | Shows the dropdown panel.                        |
+| `updateAccessibleTrigger` | `(): void`                                       |                                                  |
+
+## Events
+
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `sl-after-hide` | Emitted after the dropdown closes and all animations are complete. |
+| `sl-after-show` | Emitted after the dropdown opens and all animations are complete. |
+| `sl-hide`       | Emitted when the dropdown closes.                |
+| `sl-show`       | Emitted when the dropdown opens.                 |
+
+## Slots
+
+| Name      | Description                                      |
+|-----------|--------------------------------------------------|
+|           | The dropdown's main content.                     |
+| `trigger` | The dropdown's trigger, usually a `<sl-button>` element. |
+
+## CSS Shadow Parts
+
+| Part      | Description                                      |
+|-----------|--------------------------------------------------|
+| `base`    | The component's base wrapper.                    |
+| `panel`   | The panel that gets shown when the dropdown is open. |
+| `trigger` | The container that wraps the trigger.            |

package/doc/nve-menu-item.md

@@ -0,0 +1,59 @@
+# nve-menu-item
+
+En sl-menu-item i NVE-forkledning.
+Mer info: https://shoelace.style/components/menu-item
+
+## Properties
+
+| Property        | Attribute       | Type                     | Default | Description                                      |
+|-----------------|-----------------|--------------------------|---------|--------------------------------------------------|
+| `category`      | `category`      | `boolean`                | false   | Gjør at teksten vises som en unclickable kategori |
+| `checked`       |                 | `boolean`                |         | Draws the item in a checked state.               |
+| `defaultSlot`   |                 | `HTMLSlotElement`        |         |                                                  |
+| `dir`           |                 | `string`                 |         |                                                  |
+| `disabled`      |                 | `boolean`                |         | Draws the menu item in a disabled state, preventing selection. |
+| `dividerBottom` | `dividerBottom` | `boolean`                | false   | Setter en divider på bunnen av item.             |
+| `dividerTop`    | `dividerTop`    | `boolean`                | false   | Setter en divider på toppen av item.             |
+| `indent`        | `indent`        | `boolean`                | false   | Gjør at teksten blir indent og mindre dominant farge |
+| `lang`          |                 | `string`                 |         |                                                  |
+| `menuItem`      |                 | `HTMLElement`            |         |                                                  |
+| `subtext`       | `subtext`       | `string`                 | ""      | Tekst som vises som subtext(undertekst).         |
+| `type`          |                 | `"normal" \| "checkbox"` |         | The type of menu item to render. To use `checked`, this value must be set to `checkbox`. |
+| `value`         |                 | `string`                 |         | A unique value to store in the menu item. This can be used as a way to identify menu items when selected. |
+
+## Methods
+
+| Method                 | Type                                             | Description                                      |
+|------------------------|--------------------------------------------------|--------------------------------------------------|
+| `emit`                 | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
+| `getTextLabel`         | `(): string`                                     | Returns a text label based on the contents of the menu item's default slot. |
+| `handleCheckedChange`  | `(): void`                                       |                                                  |
+| `handleDisabledChange` | `(): void`                                       |                                                  |
+| `handleTypeChange`     | `(): void`                                       |                                                  |
+| `isSubmenu`            | `(): boolean`                                    |                                                  |
+
+## Slots
+
+| Name      | Description                                      |
+|-----------|--------------------------------------------------|
+|           | The menu item's label.                           |
+| `prefix`  | Used to prepend an icon or similar element to the menu item. |
+| `submenu` | Used to denote a nested menu.                    |
+| `suffix`  | Used to append an icon or similar element to the menu item. |
+
+## CSS Shadow Parts
+
+| Part           | Description                                      |
+|----------------|--------------------------------------------------|
+| `base`         | The component's base wrapper.                    |
+| `checked-icon` | The checked icon, which is only visible when the menu item is checked. |
+| `label`        | The menu item label.                             |
+| `prefix`       | The prefix container.                            |
+| `submenu-icon` | The submenu icon, visible only when the menu item has a submenu (not yet implemented). |
+| `suffix`       | The suffix container.                            |
+
+## CSS Custom Properties
+
+| Property           | Default | Description                                      |
+|--------------------|---------|--------------------------------------------------|
+| `--submenu-offset` | "-2px"  | The distance submenus shift to overlap the parent menu. |

package/doc/nve-menu.md

@@ -0,0 +1,34 @@
+# nve-menu
+
+En sl-menu i NVE-forkledning.
+Mer info: https://shoelace.style/components/menu
+
+
+## Properties
+
+| Property      | Type              |
+|---------------|-------------------|
+| `defaultSlot` | `HTMLSlotElement` |
+| `dir`         | `string`          |
+| `lang`        | `string`          |
+
+## Methods
+
+| Method           | Type                                             | Description                                      |
+|------------------|--------------------------------------------------|--------------------------------------------------|
+| `emit`           | `{ <T extends "submit" \| "reset" \| "abort" \| "animationcancel" \| "animationend" \| "animationiteration" \| "animationstart" \| "auxclick" \| "beforeinput" \| "blur" \| "cancel" \| "canplay" \| ... 112 more ... \| "sl-start">(name: EventTypeDoesNotRequireDetail<...>, options?: SlEventInit<...> \| undefined): GetCustomEventType<...` | Emits a custom event with more convenient defaults. |
+| `getAllItems`    | `(): SlMenuItem[]`                               |                                                  |
+| `getCurrentItem` | `(): SlMenuItem \| undefined`                    |                                                  |
+| `setCurrentItem` | `(item: SlMenuItem): void`                       |                                                  |
+
+## Events
+
+| Event       | Type                   | Description                           |
+|-------------|------------------------|---------------------------------------|
+| `sl-select` | `{ item: SlMenuItem }` | Emitted when a menu item is selected. |
+
+## Slots
+
+| Name | Description                                      |
+|------|--------------------------------------------------|
+|      | The menu's content, including menu items, menu labels, and dividers. |

package/doc/nve-tooltip.md

@@ -15,7 +15,7 @@ En sl-tooltip i NVE-uniform. TODO: Denne har ingen NVE-styling ennå.
 | `hoist`       | `boolean`                                        | Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with<br />`overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,<br />scenarios. |
 | `lang`        | `string`                                         |                                                  |
 | `open`        | `boolean`                                        | Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. |
-| `placement`   | `"top" \| "top-start" \| "top-end" \| "right" \| "right-start" \| "right-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end"` | The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip<br />inside of the viewport. |
+| `placement`   | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "right" \| "right-start" \| "right-end" \| "left" \| "left-start" \| "left-end"` | The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip<br />inside of the viewport. |
 | `popup`       | `SlPopup`                                        |                                                  |
 | `skidding`    | `number`                                         | The distance in pixels from which to offset the tooltip along its target. |
 | `trigger`     | `string`                                         | Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple<br />options can be passed by separating them with a space. When manual is used, the tooltip must be activated<br />programmatically. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

package/src/components/index.ts

@@ -3,11 +3,19 @@ export * from './nve-alert/nve-alert';
 export * from './nve-button/nve-button';
 export * from './nve-checkbox-group/nve-checkbox-group';
 export * from './nve-checkbox/nve-checkbox';
+export * from './nve-dialog/nve-dialog';
+export * from './nve-divider/nve-divider';
+export * from './nve-dropdown/nve-dropdown';
 export * from './nve-icon/nve-icon';
 export * from './nve-input/nve-input';
 export * from './nve-label/nve-label';
-export * from './nve-radio/nve-radio.component';
+export * from './nve-menu-item/nve-menu-item';
+export * from './nve-menu/nve-menu';
 export * from './nve-radio-button/nve-radio-button.component';
 export * from './nve-radio-group/nve-radio-group.component';
+export * from './nve-radio/nve-radio.component';
 export * from './nve-spinner/nve-spinner';
 export * from './nve-tooltip/nve-tooltip';
+
+import '../utils/systemLibraryCustomization';
+

package/src/components/nve-dialog/nve-dialog-demo.ts

@@ -0,0 +1,91 @@
+import { html } from 'lit';
+
+const table = html`
+    <hr />
+  <h3 id="nve-label">nve-dialog</h3>
+  <table class="demo">
+    <thead>
+      <tr>
+        <th></th>
+        <th></th>
+        <th></th>
+      </tr>
+    </thead>
+    
+  <tbody>
+    <tr>
+      <td>Basic</td>
+      <nve-dialog label="Dialog tittel" class="dialog-width">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+        <div slot="footer">
+          <nve-button variant="primary" onclick="document.querySelector('.dialog-width').hide()">Lukk</nve-button>
+        </div>
+      </nve-dialog>
+      <td>
+        <nve-button onclick="document.querySelector('.dialog-width').show()" class="open-dialog" variant="primary">Open Dialog</nve-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Slett</td>
+      <nve-dialog icon="warning" label="Vil du slette dette påbegynte skjemaet?" class="dialog-width2">
+        Du kan ikke angre dette etter du har slettet skjemaet. 
+        <div slot="footer">
+          <nve-button variant="primary" onclick="document.querySelector('.dialog-width2').hide()">Slett</nve-button>
+          <nve-button class="close" variant="neutral" onclick="document.querySelector('.dialog-width2').hide()">Avbryt</nve-button>
+        </div>
+      </nve-dialog>
+      <td>
+        <nve-button onclick="document.querySelector('.dialog-width2').show()" class="open-dialog" variant="primary">Open Dialog</nve-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Informasjonskapsler (cookies)</td>
+      <nve-dialog icon="cookie" label="Informasjonskapsler (cookies)" class="dialog-width3">
+        Noregs vassdrags- og energidirektorat (NVE) er underlagt Olje- og energidepartementet og har ansvar for å forvalte vass- og energiressursane til landet. NVE varetek også dei statlege forvaltingsoppgåvene innanfor skredførebygging.
+        <div slot="footer">
+          <nve-button variant="primary" onclick="document.querySelector('.dialog-width3').hide()">Godta alle</nve-button>
+          <nve-button class="close" onclick="document.querySelector('.dialog-width3').hide()">Kun nødvendige</nve-button>
+          <nve-button variant="neutral" onclick="document.querySelector('.dialog-width3').hide()">Mine valg</nve-button>
+        </div>
+      </nve-dialog>
+      <td>
+        <nve-button onclick="document.querySelector('.dialog-width3').show()" class="open-dialog" variant="primary">Open Dialog</nve-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Kommenter (custom slot)</td>
+      <nve-dialog icon="info" label="Kommenter" class="dialog-width4">
+          <p>Nve-Textarea er ikke laget ennå</p>
+          <textarea placeholder="Skriv inn din kommentar her..."></textarea>
+        <div slot="footer">
+          <nve-button variant="primary" onclick="document.querySelector('.dialog-width4').hide()">Send</nve-button>
+          <nve-button variant="neutral" onclick="document.querySelector('.dialog-width4').hide()">Avbryt</nve-button>
+        </div>
+      </nve-dialog>
+      <td>
+        <nve-button onclick="document.querySelector('.dialog-width4').show()" class="open-dialog" variant="primary">Open Dialog</nve-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Disable background</td>
+      <nve-dialog disableBackground label="I denne kan du ikke trykke utenfor for å lukke" class="dialog-width5" style="--width: 30vw;">
+        Tilfeldig tekst. 
+        <div slot="footer">
+          <nve-button variant="primary" onclick="document.querySelector('.dialog-width5').hide()">Slett</nve-button>
+          <nve-button class="close" variant="neutral" onclick="document.querySelector('.dialog-width5').hide()">Avbryt</nve-button>
+        </div>
+      </nve-dialog>
+      <td>
+        <nve-button onclick="document.querySelector('.dialog-width5').show()" class="open-dialog" variant="primary">Open Dialog</nve-button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+`;
+
+export default table;

package/src/components/nve-dialog/nve-dialog-styles.ts

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+
+export default css`
+:host {
+  --header-spacing: var(--spacing-x-large, 2rem);
+  --body-spacing: var(--spacing-x-large, 2rem);
+  --footer-spacing: var(--spacing-x-large, 2rem);
+  --width: 40.625rem;
+}
+
+:host::part(footer), ::slotted([slot="footer"]) {
+  display: flex;
+  text-align: left;
+  gap: 0.75rem;
+
+}
+:host::part(title), ::slotted([slot="title"]) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative; 
+  color: var(--neutrals-foreground-primary, #00131C);
+  font: var(--header-small);
+  line-height: 130%;
+  padding: var(--spacing-x-large, 2rem);
+}
+
+:host::part(title)::before {
+  font-family: 'Material Symbols Outlined';
+  content: var(--title-icon);
+}
+
+.dialog__header-actions sl-icon-button, .dialog__header-actions ::slotted(sl-icon-button) {
+  color: var(--neutrals-foreground-primary, #00131C);
+  font-family: Source Sans Pro;
+  font-size: 1.3rem;
+  font-style: normal;
+  font-weight: bold;
+}
+
+:host::part(body), ::slotted([slot="body"]) {
+  color: var(--neutrals-foreground-primary, #00131C);
+  font: var(--body-medium-default);
+  line-height: 150%;
+  padding: 0 var(--spacing-x-large, 2rem) 0 var(--spacing-x-large, 2rem);
+}
+
+.dialog__overlay {
+  background-color: rgba(13, 13, 14, 0.40);
+}
+`;

package/src/components/nve-dialog/nve-dialog.ts

@@ -0,0 +1,77 @@
+import { SlDialog } from '@shoelace-style/shoelace';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './nve-dialog-styles';
+/**
+ * En sl-dialog i NVE-forkledning.
+ * Mer info: https://shoelace.style/components/dialog
+ *
+ * Vil du ha ikon foran tittelen kan du angi navnet på ikonet som attributt "icon".
+ * Skal det ikke være mulig å trykke utenfor for å lukke dialogen, sett på disableDialog attributt
+ * 
+ * @slot label - teksten som skal vises i overskriften. Eller du kan bruke label-attributtet
+ * @slot body - hovedinnholdet
+ * @slot footer - feltet i bunden hvor knappene er plassert
+ *
+ */
+@customElement('nve-dialog')
+export class NveDialog extends SlDialog {
+  /**
+   * Ikonet som skal vises
+   */
+  @property({ type: String, reflect: true }) icon = '';
+  /**
+   * Hvis disableBacground er true, kan man ikke trykke utenfor dialogen for å lukke den. 
+   */
+  @property({ type: Boolean, reflect: true }) disableBackground = false;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * 
+   * Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
+   */
+  handleRequestClose(event: any) {
+    if (this.disableBackground && event.detail.source === 'overlay') {
+      event.preventDefault();
+    }
+  }
+  
+  updated(changedProperties: any) {
+    super.updated(changedProperties);
+    if(changedProperties.has('disableBackground')){
+      this.addEventListener('sl-request-close', this.handleRequestClose);
+    }
+    this.updateIcon();
+    
+    
+  }
+  /**
+   * Oppdaterer ikonet som vises i dialogens tittel.
+   * Metoden søker først etter tittel-elementet i komponentens skygge-DOM. 
+   * Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres 
+   * tittel-elementets stil for å inkludere det angitte ikonet. 
+   * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til 'none' 
+   * for å unngå å skape unødvendig mellomrom i layouten.
+   */
+  updateIcon() {
+    const titleElement = this.shadowRoot?.querySelector('.dialog__title');
+    if (titleElement instanceof HTMLElement) { 
+      const iconContent = this.icon ? `"${this.icon}"` : 'none'; 
+      titleElement.style.setProperty('--title-icon', iconContent);
+    }
+  }
+
+  static styles = [
+    SlDialog.styles,
+    styles
+  ];
+  
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-dialog': NveDialog;
+  }
+}

package/src/components/nve-divider/nve-divider.ts

@@ -0,0 +1,32 @@
+import { SlDivider } from '@shoelace-style/shoelace';
+import { css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * En Shoelace-divider i NVE-forkledning.
+ * Se https://shoelace.style/components/divider
+ */
+@customElement('nve-divider')
+export class NveDivider extends SlDivider {
+  constructor() {
+    super();
+  }
+  static styles = [
+    SlDivider.styles,
+    css`
+      :host {
+        --color: var(--neutrals-border-subtle);
+        --width:  var(--border-width-strong, 2px);
+        --spacing:  var(--spacing-xx-small, 0.25rem);
+
+      }
+      
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nve-divider': NveDivider;
+  }
+}

package/src/components/nve-dropdown/nve-dropdown-demo.ts

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+
+/**
+ * Demonstrasjon av nve-dropdown
+ */
+const table = html`
+  <hr />
+  <h3 id="nve-dropdown">nve-dropdown</h3>
+  <nve-dropdown>
+    <nve-button variant="primary" slot="trigger">
+    <nve-icon name="expand_more" slot="suffix"></nve-icon>
+    Dropdown</nve-button>
+    <nve-menu>
+      <nve-menu-item >Tekst</nve-menu-item>
+      <nve-menu-item subtext='Dette er en undertekst'>Tekstrrrrrrrrrr</nve-menu-item>
+      <nve-menu-item> 
+            <nve-checkbox >Tekst</nve-checkbox>
+      </nve-menu-item>
+      <nve-divider></nve-divider>
+      <nve-menu-item>Tekst</nve-menu-item>
+    </nve-menu>
+  </nve-dropdown>
+      
+   
+`;
+
+export default table;

package/src/components/nve-dropdown/nve-dropdown.styles.ts

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+
+/* Roterer chevron når dropdown åpner */
+export default css`
+:host([open]) {
+  --icon-rotation: rotate(180deg);
+}
+`;