fgeierst

import { expect, test } from '@playwright/test';
import type { Dropdown } from './dropdown.js'; // Assuming Dropdown type is available

test('should emit a change event and signal in DOM', async ({ fastPage, page }) => {
  // fastPage.setTemplate sets up the component under test
  await fastPage.setTemplate({ attributes: { type: 'combobox' } });
  const { element } = fastPage; // element refers to the fluent-dropdown

  // Step 1: In the browser context, attach an event listener to the component.

fgeierst

import { expect, test } from '@playwright/test';

test('should emit a custom event on interaction', async ({ page }) => {
  // Assume 'my-component' is a web component that emits a 'custom-event'
  await page.setContent(`
    <button id="myButton">Click Me</button>
    <my-component></my-component>
  `);
  const myComponent = page.locator('my-component');
  const myButton = page.locator('#myButton');

fgeierst

<link
  rel="stylesheet"
  href="/node_modules/playground-elements/themes/neo.css"
/>
<script type="module" src="/node_modules/playground-elements/playground-ide.js"
></script>

<playground-ide
  id="playground"
  resizable

fgeierst

• feat for a new feature for the user, not a new feature for build script. Such commit will trigger a release bumping a MINOR version.
• fix for a bug fix for the user, not a fix to a build script. Such commit will trigger a release bumping a PATCH version.
• perf for performance improvements. Such commit will trigger a release bumping a PATCH version.
• docs for changes to the documentation.
• style for formatting changes, missing semicolons, etc.
• refactor for refactoring production code, e.g. renaming a variable.
• test for adding missing tests, refactoring tests; no production code change.
• build for updating build configuration, development tools or other changes irrelevant to the user.

Source: http://karma-runner.github.io/6.4/dev/git-commit-msg.html

fgeierst

a:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ */

fgeierst

/* Visually hide an element while still making it accessible for screen readers. */

.visually-hidden {
    position: absolute;
    transform: scale(0);
}

/* https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
 * https://codepen.io/scottohara/pen/QWVOqNY
 */

fgeierst

import Test from './Test.svelte';

// Mount Svelte component
const test = new Test({
	target: document.querySelector('#test')
});

fgeierst

.wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20em) 1fr;
}

.wrapper > * {
    grid-column: 2 / -2;
}

fgeierst

glyphhanger --subset=*.ttf --formats=woff2 --LATIN 

fgeierst

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">