@porsche-design-system/components-vue 2.20.0-rc.1 → 3.0.0-alpha.0

package/CHANGELOG.md

@@ -9,6 +9,408 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.0] - 2023-02-08
+
+#### Note to the new `v3` major release of the Porsche Design System
+
+With the new **Porsche Design Language** comes a lot of changes regarding layout and design principles. To keep
+refactoring efforts as low as possible when upgrading from `v2` to `v3`, **breaking changes** were avoided as far as
+possible. Nevertheless, there are a few breaking changes and some more deprecations which should receive attention.
+
+#### 👹 Breaking Changes 👹
+
+##### Button:
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-button tabbable="false">Some label</p-button>
++ <p-button tabindex="-1">Some label</p-button>
+```
+
+- Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be
+  set if the component has the `hide-label` property.
+
+```diff
+- <p-button hide-label="true">Some label</p-button>
++ <p-button hide-label="true" icon="arrow-right">Some label</p-button>
+
+- <p-button hide-label="{ base: true, m: false }">Some label</p-button>
++ <p-button hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-button>
+```
+
+##### Button Pure:
+
+- Removed `subline` slot (visually not intended anymore).
+
+```diff
+<p-button-pure>
+  Some label
+-   <p slot="subline">Some Subline</p>
+</p-button-pure>
+```
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-button-pure tabbable="false">Some label</p-button-pure>
++ <p-button-pure tabindex="-1">Some label</p-button-pure>
+```
+
+##### Icon:
+
+- Value `inherit` for prop `color` works slightly different to the previous major version. A CSS filter is required to
+  apply custom coloring to take advantage of using an SVG embedded in an `<img/>` for better SSR support and loading
+  performance in general.
+
+```diff
+- <p-icon color="inherit" style="color: white;"></p-icon>
++ <p-icon color="inherit" style="filter: invert(100%);"></p-icon>
+```
+
+- Camel case syntax for `name` prop isn't supported, please use param case syntax instead (TypeScript typings have been
+  updated too).
+
+```diff
+- <p-icon name="arrowRight"></p-icon>
++ <p-icon name="arrow-right"></p-icon>
+```
+
+##### Link:
+
+- Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be
+  set if the component has the `hide-label` property.
+
+```diff
+- <p-link href="#" hide-label="true">Some label</p-link>
++ <p-link href="#" hide-label="true" icon="arrow-right">Some label</p-link>
+
+- <p-link href="#" hide-label="{ base: true, m: false }">Some label</p-link>
++ <p-link href="#" hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-link>
+```
+
+##### Link Pure:
+
+- Removed `subline` slot (visually not intended anymore).
+
+```diff
+<p-link-pure href="#">
+  Some label
+-   <p slot="subline">Some Subline</p>
+</p-link-pure>
+```
+
+##### Switch:
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-switch tabbable="false">Some label</p-switch>
++ <p-switch tabindex="-1">Some label</p-switch>
+```
+
+##### Partials:
+
+- `getIconLinks()` partial accepts only param-cased icon names.
+
+```diff
+- require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrowRight'] })
+
++ require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrow-right'] })
+```
+
+##### CSS global scope:
+
+- Changed naming of CSS global variables names.
+
+```diff
+- --p-animation-duration__spinner
+- --p-animation-duration__banner
++ --p-animation-duration
+```
+
+#### 🤡 Component deprecations 🤡
+
+All deprecated components are refactored to match the new design language, therefor it's technically not breaking, but
+we highly recommend to migrate to the mentioned alternative, since those deprecated components will be removed with next
+major version.
+
+##### Content Wrapper:
+
+- Component is deprecated and will be removed with the next major release. Please use **[Porsche Grid](styles/grid)**
+  instead, which is based on [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific
+  layout needs for a harmonic appearance across all digital Porsche touch-points.
+
+##### Flex:
+
+- Component is deprecated and will be removed with the next major release. In general, please use native
+  [CSS Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox) instead for better performance and more
+  standardized layout technique.
+
+##### Grid:
+
+- Component is deprecated and will be removed with the next major release. In general, please use native
+  [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) in combination with
+  **[Porsche Grid](styles/grid)** instead for better performance and more standardized layout technique.
+
+##### Headline:
+
+```diff
+- <p-headline>The quick brown fox jumps over the lazy dog</p-headline>
++ <p-heading>The quick brown fox jumps over the lazy dog</p-heading>
+```
+
+##### Link Social:
+
+- Component is deprecated and will be removed with the next major release. Please use the **[Link](components/link)**
+  component instead.
+
+#### 🤖 Property deprecations 🤖
+
+All deprecated properties are still present without any effect, therefor it's technically not breaking, but we highly
+recommend to migrate and remove the deprecated props since those ones will be removed with next major version.
+
+##### Button Pure:
+
+- Prop `weight` is deprecated, only regular font weight will be applied.
+
+```diff
+- <p-button-pure weight="thin">Some label</p-button-pure>
+- <p-button-pure weight="regular">Some label</p-button-pure>
+- <p-button-pure weight="semibold">Some label</p-button-pure>
+- <p-button-pure weight="bold">Some label</p-button-pure>
++ <p-button-pure>Some label</p-button-pure>
+```
+
+##### Content Wrapper (deprecated):
+
+- Prop `theme` and `background-color` are deprecated.
+
+```diff
+- <p-content-wrapper theme="dark" background-color="default">Some content</p-content-wrapper>
++ <p-content-wrapper>Some content</p-content-wrapper>
+```
+
+##### Grid (deprecated):
+
+- The `gutter` property is deprecated and has no effect anymore. Instead, a fluid gutter depending on the viewport width
+  is used.
+
+```diff
+- <p-grid gutter="16">Some content</p-grid>
+- <p-grid gutter="24">Some content</p-grid>
+- <p-grid gutter="36">Some content</p-grid>
++ <p-grid>Some content</p-grid>
+```
+
+##### Icon:
+
+- Prop `lazy` is deprecated.
+
+```diff
+- <p-icon lazy="true"></p-icon>
++ <p-icon></p-icon>
+```
+
+##### Link Pure:
+
+- Prop `weight` is deprecated, only regular font weight will be applied.
+
+```diff
+- <p-link-pure href="#" weight="thin">Some label</p-link-pure>
+- <p-link-pure href="#" weight="regular">Some label</p-link-pure>
+- <p-link-pure href="#" weight="semibold">Some label</p-link-pure>
+- <p-link-pure href="#" weight="bold">Some label</p-link-pure>
++ <p-link-pure href="#">Some label</p-link-pure>
+```
+
+##### Segmented Control:
+
+- Prop `background-color` is deprecated.
+
+```diff
+- <p-segmented-control background-color="background-surface">
+   <p-segmented-control-item value="xs">XS</p-segmented-control-item>
+   <p-segmented-control-item value="s">S</p-segmented-control-item>
+ </p-segmented-control>
++ <p-segmented-control>
+   <p-segmented-control-item value="xs">XS</p-segmented-control-item>
+   <p-segmented-control-item value="s">S</p-segmented-control-item>
+ </p-segmented-control>
+```
+
+#### 👾 Property value deprecations 👾
+
+All deprecated values are mapped to new ones, therefor it's technically not breaking, but we highly recommend to migrate
+to the new values since those ones will be removed with next major version.
+
+##### Banner:
+
+- Prop value `fluid` of `width` prop is deprecated.
+
+```diff
+- <p-banner width="fluid"></p-banner>
++ <p-banner></p-banner>
+```
+
+- Prop value `neutral` of `state` prop is deprecated.
+
+```diff
+- <p-banner state="neutral">
+  <span slot="title">Some banner title</span>
+  <span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
+ </p-banner>
++ <p-banner state="info">
+  <span slot="title">Some banner title</span>
+  <span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
+ </p-banner>
+```
+
+##### Content Wrapper:
+
+- Prop value `fluid` of `width` prop is deprecated.
+
+```diff
+- <p-content-wrapper width="fluid">Some content</p-content-wrapper>
++ <p-content-wrapper>Some content</p-content-wrapper>
+```
+
+##### Icon:
+
+- Prop values
+  `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+  `color` prop are deprecated.
+
+```diff
+- <p-icon color="brand"></p-icon>
++ <p-icon color="primary"></p-icon>
+
+- <p-icon color="default"></p-icon>
++ <p-icon color="primary"></p-icon>
+
+- <p-icon color="neutral-contrast-low"></p-icon>
++ <p-icon color="contrast-low"></p-icon>
+
+- <p-icon color="neutral-contrast-medium"></p-icon>
++ <p-icon color="contrast-medium"></p-icon>
+
+- <p-icon color="neutral-contrast-high"></p-icon>
++ <p-icon color="contrast-high"></p-icon>
+
+- <p-icon color="neutral-contrast-neutral"></p-icon>
++ <p-icon color="contrast-info"></p-icon>
+```
+
+##### Inline Notification:
+
+- Prop value `neutral` of `state` prop is deprecated.
+
+```diff
+- <p-inline-notification state="neutral"></p-inline-notification>
++ <p-inline-notification state="info"></p-inline-notification>
+```
+
+##### Tag:
+
+- Prop value `notification-neutral | neutral-contrast-high | background-default` of `color` prop is deprecated.
+
+```diff
+- <p-tag color="notification-neutral">Color label</p-tag>
++ <p-tag color="notification-info">Color label</p-tag>
+
+- <p-tag color="neutral-contrast-high">Color label</p-tag>
++ <p-tag color="primary">Color label</p-tag>
+
+- <p-tag color="background-default">Color label</p-tag>
++ <p-tag color="background-base">Color label</p-tag>
+```
+
+##### Tag Dismissible:
+
+- Prop value `background-default` of `color` prop is deprecated.
+
+```diff
+- <p-tag-dismissible color="background-default">Color label</p-tag-dismissible>
++ <p-tag-dismissible color="background-base">Color label</p-tag-dismissible>
+```
+
+##### Text:
+
+- Prop value `thin | semibold` of `weight` prop is deprecated.
+
+```diff
+- <p-text weight="thin">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text weight="semibold">Some text</p-text>
++ <p-text weight="semi-bold">Some text</p-text>
+```
+
+- Prop value
+  `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+  `color` prop is deprecated.
+
+```diff
+- <p-text color="brand">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text color="default">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text color="neutral-contrast-low">Some text</p-text>
++ <p-text color="contrast-low">Some text</p-text>
+
+- <p-text color="neutral-contrast-medium">Some text</p-text>
++ <p-text color="contrast-medium">Some text</p-text>
+
+- <p-text color="neutral-contrast-high">Some text</p-text>
++ <p-text color="contrast-high">Some text</p-text>
+
+- <p-text color="notification-neutral">Some text</p-text>
++ <p-text color="notification-info">Some text</p-text>
+```
+
+##### ToastManager:
+
+- Prop value `neutral` of `state` parameter is deprecated.
+
+```diff
+- …addMessage({ text: `Some message`, state: 'neutral' })
++ …addMessage({ text: `Some message`, state: 'info' })
+```
+
+#### Added
+
+- `Display` component
+- `Heading` component
+- Prop `underline` for `Link Pure`
+- Prop `theme` for `Checkbox Wrapper`, `Radio Button Wrapper`, `Popover`, `Tag Dismissible`, `Textarea Wrapper`,
+  `Text Field Wrapper` and `Fieldset Wrapper`
+- Prop `size` for `Icon` supports `x-small` and `x-large`
+- Prop `size` for `Accordion` `compact="true"` supports `medium`
+
+#### Changed
+
+- `Spinner`, `Icon`, `Link Pure`, `Button Pure`, `Link`, `Link Social`, `Button`, `Checkbox Wrapper`,
+  `Radio Button Wrapper`, `Popover`, `Modal`, `Select Wrapper`, `Tag`, `Tag Dismissible`, `Textarea Wrapper`,
+  `Inline Notification`, `Banner`, `Toast`, `Grid`, `Flex`, `Pagination`, `Scroller`, `Accordion`, `Text`,
+  `Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper` matches new design language.
+- `Icon` supports
+  `primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit`
+  for `color` prop.
+- Default value of prop `width` of `Banner` has changed from `basic` to `extended`
+- Default value of prop `action-icon` of `Inline Notification` has changed from `arrow-head-right` to `arrow-right`
+- Default value of prop `name` of `Icon` has changed from `arrow-head-right` to `arrow-right`
+- Default value of prop `variant` of `Link` and `Button` has changed from `secondary` to `primary`
+
+#### Removed
+
+- Custom slotted CSS for mostly all components. Equivalent styles are now provided by `getInitialStyles()` partial
+  instead.
+- `applyNormalizeStyles` option from `getInitialStyles()` partial which is applied by default now.
+
+### [2.20.0] - 2023-02-06
+
 ### [2.20.0-rc.1] - 2023-02-06
 
 ### [2.20.0-rc.0] - 2023-01-30
@@ -923,9 +1325,7 @@ supporting `:focus-visible` otherwise it will fallback to `:focus` CSS implement
 
 Color and outline of general focus styling has changed to `currentColor` for light/dark theme with an outline of 1px
 width/offset. If you have custom components build with the usage of our `@porsche-design-system/utilities` package then
-update it to the latest version (we also provide a focus
-[SCSS mixin](https://designsystem.porsche.com/latest/utilities/scss/functions) and
-[JS function](https://designsystem.porsche.com/latest/utilities/js/functions)).
+update it to the latest version.
 
 #### Improved geometry of Porsche Next font
 

package/lib/components/AccordionWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, HeadlineTag, ThemeExtendedElectric } from '../types';
+import type { AccordionChangeEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     size: string;
     tag: string;
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "light-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
 }>, {
     size: string;
     tag: string;
@@ -63,8 +63,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onAccordionChange?: ((value: AccordionChangeEvent) => any) | undefined;
 }, {
     size: BreakpointCustomizable<AccordionSize>;
-    tag: HeadlineTag;
-    theme: ThemeExtendedElectric;
+    tag: AccordionTag;
+    theme: Theme;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/BannerWrapper.vue.d.ts

@@ -4,7 +4,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * State of the banner.
      */
-    state?: "warning" | "error" | "neutral" | undefined;
+    state?: "warning" | "error" | "info" | "neutral" | undefined;
     /**
      * Adapts the banner color depending on the theme.
      */
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * State of the banner.
      */
-    state?: "warning" | "error" | "neutral" | undefined;
+    state?: "warning" | "error" | "info" | "neutral" | undefined;
     /**
      * Adapts the banner color depending on the theme.
      */

package/lib/components/BannerWrapper.vue.js

@@ -1,31 +1,31 @@
 import { defineComponent as p, ref as d, onMounted as f, onUpdated as l, openBlock as i, createBlock as m, resolveDynamicComponent as u, unref as c, withCtx as _, renderSlot as C } from "vue";
 import { getPrefixedTagName as h, syncProperties as n, addEventListenerToElementRef as v } from "../../utils.js";
-const b = /* @__PURE__ */ p({
+const B = /* @__PURE__ */ p({
   __name: "BannerWrapper",
   props: {
     persistent: { type: Boolean, default: !1 },
-    state: { default: "neutral" },
+    state: { default: "info" },
     theme: { default: "light" },
-    width: { default: "basic" }
+    width: { default: "extended" }
   },
   emits: ["dismiss"],
-  setup(o, { emit: a }) {
-    const t = o, r = h("p-banner"), e = d();
+  setup(o, { emit: r }) {
+    const t = o, s = h("p-banner"), e = d();
     return f(() => {
-      n(e.value, t), v(e.value, "dismiss", a);
+      n(e.value, t), v(e.value, "dismiss", r);
     }), l(() => {
       n(e.value, t);
-    }), (s, g) => (i(), m(u(c(r)), {
+    }), (a, g) => (i(), m(u(c(s)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
       default: _(() => [
-        C(s.$slots, "default")
+        C(a.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
 });
 export {
-  b as default
+  B as default
 };

package/lib/components/ButtonPureWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /**
      * Display button in active state.
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonPureIconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -35,28 +35,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean> | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
     type?: "reset" | "button" | "submit" | undefined;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -66,7 +62,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     size: string;
     stretch: boolean;
-    tabbable: boolean;
     theme: string;
     type: string;
     weight: string;
@@ -94,7 +89,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * The icon shown.
      */
-    icon?: LinkButtonPureIconName | undefined;
+    icon?: LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
@@ -106,28 +101,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<"x-small" | "small" | "medium" | "large" | "x-large" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean> | undefined;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "light-electric" | "dark-electric" | undefined;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
     type?: "reset" | "button" | "submit" | undefined;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "thin" | "regular" | "semibold" | "bold" | undefined;
+    weight?: "thin" | "regular" | "semibold" | "semi-bold" | "bold" | undefined;
 }>, {
     active: boolean;
     alignLabel: string;
@@ -137,7 +128,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     size: string;
     stretch: boolean;
-    tabbable: boolean;
     theme: string;
     type: string;
     weight: string;
@@ -145,15 +135,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     weight: TextWeight;
     stretch: BreakpointCustomizable<boolean>;
     size: BreakpointCustomizable<TextSize>;
-    theme: ThemeExtendedElectricDark;
+    theme: Theme;
     type: ButtonType;
     active: boolean;
     alignLabel: BreakpointCustomizable<AlignLabel>;
     disabled: boolean;
     hideLabel: BreakpointCustomizable<boolean>;
-    icon: LinkButtonPureIconName;
+    icon: LinkButtonIconName;
     loading: boolean;
-    tabbable: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

package/lib/components/ButtonPureWrapper.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as r, ref as u, onMounted as f, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
+import { defineComponent as r, ref as f, onMounted as u, onUpdated as d, openBlock as p, createBlock as s, resolveDynamicComponent as i, unref as c, withCtx as m, renderSlot as g } from "vue";
 import { getPrefixedTagName as h, syncProperties as a } from "../../utils.js";
-const _ = /* @__PURE__ */ r({
+const B = /* @__PURE__ */ r({
   __name: "ButtonPureWrapper",
   props: {
     active: { type: Boolean, default: !1 },
@@ -8,23 +8,22 @@ const _ = /* @__PURE__ */ r({
     aria: null,
     disabled: { type: Boolean, default: !1 },
     hideLabel: { default: !1 },
-    icon: { default: "arrow-head-right" },
+    icon: { default: "arrow-right" },
     iconSource: null,
     loading: { type: Boolean, default: !1 },
     size: { default: "small" },
     stretch: { default: !1 },
-    tabbable: { type: Boolean, default: !0 },
     theme: { default: "light" },
     type: { default: "submit" },
     weight: { default: "regular" }
   },
   setup(o) {
-    const t = o, l = h("p-button-pure"), e = u();
-    return f(() => {
+    const t = o, l = h("p-button-pure"), e = f();
+    return u(() => {
       a(e.value, t);
     }), d(() => {
       a(e.value, t);
-    }), (n, b) => (p(), s(i(c(l)), {
+    }), (n, y) => (p(), s(i(c(l)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
@@ -36,5 +35,5 @@ const _ = /* @__PURE__ */ r({
   }
 });
 export {
-  _ as default
+  B as default
 };