@fpkit/acss 0.4.4

package/src/styles/styles/index.css

@@ -0,0 +1,562 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::selection {
+  /* Optional */
+  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
+  text-shadow: none;
+  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
+  /* So you can customise your styles below */
+  color: #fff;
+  background-color: #00f;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  font-size: 100%;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role=list],
+ol[role=list] {
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-inline-start: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+  aspect-ratio: auto;
+}
+
+img,
+video,
+iframe {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  font-style: italic;
+  background-repeat: no-repeat;
+  background-size: cover;
+  shape-margin: 0.75rem;
+}
+
+svg {
+  display: inline-block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+/* Inherit fonts for inputs and buttons */
+:where(button) {
+  font-family: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* Create a root stacking context */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+*:focus {
+  outline: none;
+}
+
+/* Removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+svg {
+  max-width: inline-size;
+  /* Optional - make the SVG's fill be the same as the inherited color */
+  /* Prevent the SVG from altering cursor interaction */
+  pointer-events: none;
+}
+
+svg[role=img] {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+}
+
+:root {
+  --font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --fs: 1rem;
+}
+
+html {
+  font-family: var(--font-family);
+  font-size: var(--fs);
+}
+
+main,
+header,
+footer {
+  font-size: var(--fs);
+}
+
+main > section,
+header > section,
+footer > section {
+  margin-inline: auto;
+  width: var(--content-w, 80%);
+}
+
+main > div,
+header > div,
+footer > div {
+  text-align: center;
+}
+
+section:not(nav) {
+  margin-inline: var(--sect-y, auto);
+  padding-block: var(--sect-x, --spc-4);
+}
+
+p {
+  font-size: var(--fs);
+}
+
+p + p {
+  margin-block-start: 1rem;
+}
+
+button {
+  --btn-sm: calc(12rem / 16);
+  --btn-md: calc(16rem / 16);
+  --btn-lg: calc(21rem / 16);
+  --btn-pill: 100rem;
+  --btn-height: calc(40rem / 16);
+  --fs: 0.95rem;
+  --btn-fs: calc(15rem / 16);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height, 2.5rem);
+  min-height: var(--btn-height);
+  place-items: var(--btn-place, center);
+  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
+  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, 0.375rem);
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(--tran-all);
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+}
+
+button[type] {
+  background-color: var(--btn-bg, var(--neutral-300));
+  --btn-bdr: solid var(--btn-sg);
+}
+
+button[type=submit],
+button[style*=submit] {
+  --btn-bg: var(--primary-500, royal-blue);
+  --btn-color: white;
+}
+
+button[disabled],
+button[aria-disabled=true] {
+  cursor: var(--btn-cursor, not-allowed);
+  opacity: var(--btn-opacity, 0.5);
+}
+
+button[disabled]:is(:hover, :focus),
+button[aria-disabled=true]:is(:hover, :focus) {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+
+button:is(:hover, :focus) {
+  --btn-cl: var(--btn-cl-hover);
+  background-color: var(--btn-bg, var(--btn, lightgray));
+  filter: invert(1) hue-rotate 180deg;
+  transform: scale(0.95);
+  outline-offset: var(--line-offset, 5px);
+}
+
+button:is(:hover, :focus)[aria-disabled=true] {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+
+button[type=reset] {
+  --btn-bg: transparent;
+  --btn-color: gray;
+  --btn-bdr: gray thin solid;
+}
+
+button[type=submit] {
+  --btn-bg: var(--primary-700, blue);
+  --btn-cl: #fff;
+  --btn-color: rgb(231, 231, 231);
+  --btn-border: none;
+}
+
+button[data-fp-btn~=pill],
+button[data-btn~=pill],
+button[data-style~=pill] {
+  border-radius: var(--btn-pill, 100rem);
+}
+
+button[data-btn~=sm] {
+  --btn-fs: var(--btn-sm);
+}
+
+button[data-btn~=md] {
+  --btn-fs: var(--btn-md);
+}
+
+button[data-btn~=lg] {
+  --btn-fs: var(--btn-lg);
+}
+
+p[role=note],
+[role=note],
+[data-badge] {
+  --beta: var(--warning-500, orange);
+  --stable: var(--success-500, green);
+  --production: rgb(44, 71, 151);
+  --badge-px: 0.7rem;
+  --badge-py: 0.2rem;
+  --badge-fs: 0.8rem;
+  --badge-radius: 99rem;
+  --badge-bg: lightgray;
+  --badge-fw: 500;
+  --badge-color: currentColor;
+  --badge-display: inline-block;
+  display: var(--badge-display);
+  padding-inline: var(--badge-px);
+  padding-block: var(--badge-py);
+  color: var(--badge-color);
+  background-color: var(--badge-bg);
+  border-radius: var(--badge-radius);
+}
+
+p[role=note][data-badge~=beta],
+[role=note][data-badge~=beta],
+[data-badge][data-badge~=beta] {
+  background-color: var(--beta);
+}
+
+p[role=note][data-badge~=stable],
+[role=note][data-badge~=stable],
+[data-badge][data-badge~=stable] {
+  --badge-cl: white;
+  --badge-bg: var(--stable);
+}
+
+p[role=note][data-badge~=production],
+[role=note][data-badge~=production],
+[data-badge][data-badge~=production] {
+  --badge-color: white;
+  --badge-bg: var(--production);
+}
+
+p[role=note][data-badge~=beta],
+[role=note][data-badge~=beta],
+[data-badge][data-badge~=beta] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+
+p[role=note][data-badge~=alpha],
+[role=note][data-badge~=alpha],
+[data-badge][data-badge~=alpha] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+
+p[role=note][data-badge~=beta],
+[role=note][data-badge~=beta],
+[data-badge][data-badge~=beta] {
+  --badge-color: currentColor;
+  --badge-bg: var(--beta);
+}
+
+p[role=note] {
+  --badge-display: block;
+  --border-radius: 0.5rem;
+}
+
+[data-card],
+[data-component~=card] {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 3);
+  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+  position: relative;
+  display: var(--card-display);
+  padding: var(--card-p);
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+}
+
+details {
+  --details-display: "flex";
+  --details-flex-direction: "column";
+  --details-align-items: "flex-start";
+  --details-margin: "0";
+  --details-width: "100%";
+  --details-padding-x: "0";
+  --details-padding-y: "1.5rem";
+  display: var(--details-display);
+  flex-direction: var(--details-flex-direction);
+  align-items: var(--details-align-items);
+  margin: var(--details-margin);
+  width: var(--details-width);
+  padding-inline: var(--details-padding-x);
+  padding-block: var(--details-padding-y);
+}
+
+details > summary {
+  width: var(--details-width);
+  display: var(--details-display);
+}
+
+details > div {
+  padding: var(--details-padding-y);
+}
+
+progress {
+  /* Revert all styles */
+  all: revert;
+  --progress-w: 100%;
+  --progress-h: 1rem;
+  --progress-bg: #cccccc;
+  --progress-color: rgb(71, 71, 245);
+  --progress-accent-color: var(--progress-color);
+  /* This code changes the color of the progress bar. */
+  /* The variable names indicate the colors that are used. */
+  /* The colors are used in the progress bar. */
+  /* If the progress element is busy, remove the revert styles */
+}
+
+progress[value] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  background-color: var(--progress-bg);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+
+progress[value]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+
+progress[value]::-moz-progress-bar {
+  /* Color for Firefox */
+  background-color: var(--progress-accent-color);
+  accent-color: var(--progress-accent-color);
+}
+
+progress[value]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  background-color: var(--progress-background-color);
+  accent-color: var(--progress-accent-color);
+}
+
+progress[aria-busy] {
+  width: var(--progress-w);
+  height: var(--progress-h);
+  accent-color: var(--progress-accent-color);
+  /* Styling for the remaining part of the& bar */
+}
+
+progress[aria-busy]::-webkit-progress-value {
+  /* Color for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+
+progress[aria-busy]::-moz-progress-bar {
+  accent-color: var(--progress-accent-color);
+}
+
+progress[aria-busy]::-webkit-progress-bar {
+  /* Background for Chrome, Safari, and newer Opera */
+  accent-color: var(--progress-accent-color);
+}
+
+details {
+  --details-w: 100%;
+  --details-h: fit-content;
+  --details-border: 1px solid #dfdfdf;
+  --details-display: flex;
+  --details-justify: flex-start;
+  --details-direction: columns;
+  --details-gap: 5rem;
+  --details-px: 2rem;
+  --details-py: 1.5rem;
+  --details-radius: 0.5rem;
+  --summary-cursor: pointer;
+  --summary-transitions: all 0.75s ease-in-out;
+  --summary-display: flex;
+  --summary-justify: flex-start;
+  --summary-align: center;
+  --summary-gap: 0.5rem;
+  --max-h-closed: 200px;
+  --max-h-open: 50rem;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+  border-radius: var(--details-radius);
+}
+
+details::marker {
+  content: none;
+}
+
+details summary {
+  display: var(--summary-display);
+  justify-content: var(--summary-justify);
+  align-items: var(--summary-align);
+  padding-inline: var(--summary-px, var(--details-px));
+  padding-block: var(--summary-py, var(--details-py));
+  gap: var(--summary-gap);
+}
+
+details summary:hover {
+  cursor: var(--summary-cursor);
+}
+
+details summary > section {
+  width: var(--details-w);
+}
+
+details > section {
+  padding-inline: var(--details-px);
+  padding-block: var(--details-py);
+  border: 1px transparent solid;
+}
+
+details[open] {
+  max-height: var(--max-h-open);
+  transition: var(--summary-transitions);
+}
+
+details[open] > summary {
+  border-bottom: var(--details-border);
+}
+
+details[open] > section {
+  max-height: var(--max-h-open);
+}
+
+
+
+/*# sourceMappingURL=index.css.map */

package/src/styles/styles/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/styles/index.css"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AACE;AACA;EACA;AACA;AACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;IACE;;EAEF;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAGJ;AACA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;AACA;AACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;AAAA;AAAA;EAGA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;AAAA;AAAA;EAGE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;AAAA;EAGE;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAEF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AACA;AACA;AACA;;;AAEF;EACE;EACA;EACA;EACA;AACA;;;AAEF;AACE;EACA;EACA;;;AAEF;AACE;EACA;EACA;;;AAEF;AACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;AACA;;;AAEF;AACE;EACA;;;AAEF;EACE;;;AAEF;AACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAGF","file":"index.css"}

package/src/styles/tag/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/tag/badge.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;EACE;EACA;;;AAGJ;EACE;EACA","file":"badge.css"}

package/src/styles/tag/tag.css

@@ -0,0 +1,71 @@
+p[role=note],
+[role=note],
+small > span,
+[data-tag] {
+  --beta: var(--warning-500, orange);
+  --stable: var(--success-500, green);
+  --production: rgb(44, 71, 151);
+  --tag-px: 0.7rem;
+  --tag-py: 0.2rem;
+  --tag-fs: 0.8rem;
+  --tag-radius: 99rem;
+  --tag-bg: lightgray;
+  --tag-fw: 500;
+  --tag-color: currentColor;
+  --tag-display: inline-block;
+  display: var(--tag-display);
+  padding-inline: var(--tag-px);
+  padding-block: var(--tag-py);
+  font-size: var(--tag-fs);
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: var(--tag-radius);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  background-color: var(--beta);
+}
+p[role=note][data-tag~=stable],
+[role=note][data-tag~=stable],
+small > span[data-tag~=stable],
+[data-tag][data-tag~=stable] {
+  --tag-cl: white;
+  --tag-bg: var(--stable);
+}
+p[role=note][data-tag~=production],
+[role=note][data-tag~=production],
+small > span[data-tag~=production],
+[data-tag][data-tag~=production] {
+  --tag-color: white;
+  --tag-bg: var(--production);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+p[role=note][data-tag~=alpha],
+[role=note][data-tag~=alpha],
+small > span[data-tag~=alpha],
+[data-tag][data-tag~=alpha] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+p[role=note][data-tag~=beta],
+[role=note][data-tag~=beta],
+small > span[data-tag~=beta],
+[data-tag][data-tag~=beta] {
+  --tag-color: currentColor;
+  --tag-bg: var(--beta);
+}
+
+p[role=note] {
+  --tag-display: block;
+  --border-radius: 0.5rem;
+}
+
+/*# sourceMappingURL=tag.css.map */

package/src/styles/tag/tag.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/tag/tag.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;;;AAGJ;EACE;EACA","file":"tag.css"}

package/src/styles/text-to-speech/text-to-speech.css

@@ -0,0 +1,32 @@
+[data-tts] {
+  --tts-gap: 0.5rem;
+  --tts-bg: #fff;
+  --tts-border-width: 0.125rem;
+  --tts-border-style: solid;
+  --tts-border-color: currentColor;
+  --tts-radius: 99rem;
+  --tts-padding: 0.5rem;
+  --tts-min-width: 20.3125rem;
+  --tts-align-items: center;
+  --tts-justify-content: center;
+  display: flex;
+  gap: var(--tts-gap);
+  align-items: var(--tts-align-items);
+  justify-content: var(--tts-justify-content);
+  background-color: var(--tts-bg);
+  border: none;
+  outline: var(--tts-border-width) var(--tts-border-style) var(--tts-border-color);
+  border-radius: var(--tts-radius);
+  padding: var(--tts-padding);
+  min-width: var(--tts-min-width);
+}
+[data-tts] button[data-btn~=tts-btn],
+[data-tts] .tts-border {
+  outline: none;
+}
+[data-tts] button[data-btn~=tts-btn]:hover,
+[data-tts] .tts-border:hover {
+  outline: var(--tts-border-width) var(--tts-border-style);
+}
+
+/*# sourceMappingURL=text-to-speech.css.map */

package/src/styles/text-to-speech/text-to-speech.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/text-to-speech/text-to-speech.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;AAAA;EAEE;;AACA;AAAA;EACE","file":"text-to-speech.css"}

package/src/test/setup.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);