jpzwarte

const styles = new CSSStyleSheet();
styles.replaceSync(":host {\n  align-items: center;\n  border-block-start: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);\n  display: flex;\n  padding: var(--sl-size-100);\n}\n\n:host([collapsed]) {\n  sl-button sl-icon {\n    display: none;\n  }\n}\n\nsl-button {\n  flex: 1;\n\n  sl-icon {\n    margin-inline-start: auto;\n  }\n\n  sl-avatar::part(name) {\n    font-weight: var(--sl-text-typeset-fontWeight-demibold);\n  }\n}\n\nsl-menu {\n  min-inline-size: 250px;\n\n  sl-avatar {\n    justify-content: center;\n  }\n}\n\nsl-menu-item sl-icon + sl-icon {\n  margin-inline-start: auto;\n}\n");

let CurrentUser = class CurrentUser$1 extends ScopedElementsMixin(LitElement) {
  // Rest of output removed for brevity
  
	static {
		this.styles = styles;
	}
}

jpzwarte

import { fixture } from '@sl-design-system/vitest-browser-lit';
import { cdp } from '@vitest/browser/context';
import { html } from 'lit';
import { CDPSession } from 'playwright-core';
import { beforeEach, describe, expect, it } from 'vitest';

customElements.define(
  'x-test',
  class extends HTMLElement {
    internals!: ElementInternals;

jpzwarte

    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/users/1">User 1</a>
        <a href="/users/2">User 2</a>
        <a href="/users/1/posts/1">User 1 Post 1</a>
        <a href="/users/2/posts/2">User 2 Post 2</a>
    </nav>
    <div id="app" class="content"></div>

jpzwarte

export default {
  title: 'Foo/Bar',
  tags: ['preview'],
  ...
};

jpzwarte

    <style>
      dna-page-header[stuck],
      dna-tab-bar[stuck] {
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
        // Make sure the shadow does not bleed at the top
        clip-path: inset(0 0 -10px 0);
      }
    </style>
    <dna-page-header ${sticky()} heading="Hello world!"></dna-page-header>
    <dna-tab-bar ${sticky({ stuckTo: 'dna-page-header' })}>

jpzwarte

import type { StoryObj } from '@storybook/web-components';
import type { RouterLocation } from '@vaadin/router';
import { html } from 'lit';
import { rest } from 'msw';
import { absenceNotices } from '../../data-mocks.js';
import './register.js';

export default {
  title: 'Absence/Pages/Details',
  render: ({ id }: { id: string }) =>

jpzwarte

❯ yarn start
Installing Script Dependencies...
Task readiness up to dev
🟡 install > 🟡 compile > 🟡 sandbox > 🔊 dev

🔄 install > 🟡 compile > 🟡 sandbox > 🔊 dev


> yarn install
✅ install > 🔄 compile > 🟡 sandbox > 🔊 dev

jpzwarte

import type { PropertyValues, ReactiveElement } from 'lit';
import type { Constructor, FormControlInterface } from '@open-wc/form-control';
import { FormControlMixin as OwcFormControlMixin } from '@open-wc/form-control';

export interface FormControl extends FormControlInterface {
  labels: Set<WeakRef<Node>>;
}

let nextUniqueId = 0;

jpzwarte

function managerEntries(entry = []) {
  return [...entry, require.resolve('./register')];
}

module.exports = { managerEntries };

jpzwarte

export type DateParts = { year: string; month: string; day: string };

export function getLocalizedDateParts(locale: string): DateParts {
  const rtf = new Intl.RelativeTimeFormat(locale),
    result: DateParts = { year: '', month: '', day: '' };

  ['year', 'month', 'day'].forEach(part => {
    const parts = rtf.formatToParts(-1, `${part}s` as Intl.RelativeTimeFormatUnit),
      index = parts.findIndex(({ unit }) => unit === part),
      value = parts[index + 1].value;